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Preface 



Confier a un specialiste de la qualite web le soin de prefacer un ouvrage sur l'uti- 
lisation conjointe de technologies comme HTML et CSS ? Quelle drole d'idee ! 

Auraient-elles un impact quelconque sur la qualite des sites web ? Au-dela de 
leur aspect pratique et moderne, permettraient-elles de travailler mieux et 
plus vite ? Auraient-elles des effets positifs sur la qualite de service delivree 
aux utilisateurs ? Vous l'aurez devine : j'en suis intimement persuade, et je vais 
m'efforcer de vous expliquer pourquoi. 

Bien qu'etant de plus en plus souvent amene a travailler directement sur le 
code des sites web, je ne suis pas a proprement parler un developpeur. Comme 
une immense majorite des concepteurs de sites web, je ne suis qu'un amateur 
qui a commence sur Internet en mettant en place des sites personnels ou de 
toutes petites entreprises. De fait, la phase de decouverte du media a ete 
menee par un nombre immense d'amateurs, sur des outils peu standardises, 
pour creer des sites peu professionnels, consultes avec des navigateurs qui fai- 
saient finalement un peu ce qu'ils voulaient du code qui leur etait propose. 
C'est dans ce contexte que nous avons tous appris a coder, et en ce qui me 
concerne, c'est dans ce contexte que je me suis pose les premieres questions 
sur la qualite des sites web. 
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Pendant deux a trois ans, j'ai ainsi travaille avec un certain nombre de colle- 
gues et d'etudiants sur les criteres de qualite des sites web. Nous avons tres 
rapidement pu nous pencher sur les problematiques ergonomiques, sur les 
questions de visibilite et de referencement, sur la question de la disponibilite 
des sites et sur la qualite des services associes, mais pendant toute cette 
periode, nous n'avons jamais veritablement pose les questions fondamentales : 
comment developper des sites de maniere standard ? Comment ameliorer 
l'interoperabilite des sites web ? Comment rendre la maintenance d'un site 
facile et rapide ? Comment rendre les sites accessibles a tous et pour toutes les 
plates -formes ? 

C'est bien dans la reponse a ces questions que resident les enjeux majeurs du 
livre de Raphael Goetter. L'interoperabilite, la qualite, l'accessibilite, la con- 
formite font a l'evidence partie des criteres fondamentaux de la qualite d'un 
site web. Ces notions font la difference entre un site efficace pour ses utilisa- 
teurs et un site qui fonctionne de maniere efficiente et legere, tant pour ses 
utilisateurs que pour ses administrateurs. 

Lorsque j'ai decouvert ce domaine de competences, c'est l'ensemble de ma 
vision de la qualite d'un site web qui a ete bouleversee. Avec des technologies 
reposant sur l'utilisation la plus large possible des feuilles de styles CSS, il 
devenait possible de developper des sites multi -plates -formes, accessibles, 
rapides et faciles a modifier et a maintenir, dynamiques, qui s'adaptent au 
materiel, aux competences et aux capacites de leurs utilisateurs, enfin bref, des 
outils efficaces pour creer des sites modernes. 

Autrement dit, et par opposition a la periode de developpement des sites 
amateurs que j'evoquais precedemment, les technologies HTML, XHTML 
et CSS permettent de creer ce que Ton peut enfin qualifier de sites de qualite 
professionnelle. 

Lorsque j'ai compris la puissance des technologies que decrit Raphael dans 
cet ouvrage, je n'avais fait qu'un pas modeste, bien qu'essentiel, vers la com- 
prehension de leur impact sur la qualite web. 

Par la suite, j'ai pu me rendre compte que l'utilisation generalised des feuilles 
de styles induisait des effets majeurs du point de vue de l'architecture de 
l'information et de l'ergonomie des sites. Elles permettent de reduire la taille 
des fichiers de maniere quelquefois spectaculaire, diminuant ainsi la charge 
des serveurs, ameliorant leur vitesse, accelerant le chargement des pages. 
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J'ai egalement pu constater que cette approche favorisait la reflexion sur les 
contenus et sur leur hierarchisation. Pour travailler efficacement avec les 
feuilles de styles, il est en effet benefique sinon essentiel d'optimiser la valeur 
semantique ainsi que la structure des contenus proposes. Ulterieurement, les 
feuilles de styles permettent de mettre en valeur cette semantique. Apres tout, 
pourquoi ne pas faire sur les sites web ce que Ton fait couramment lorsque 
Ton travaille sur un document texte infiniment moins complexe, en determi- 
nant une structure de titres dont chaque niveau est presente de maniere uni- 
fiee a travers des styles globaux ? 

Qu'on ne s'y trompe pas : les technologies decrites et expliquees ici ne sont 
pas des outils miracle : j'ai d'ailleurs pu m'en rendre compte assez rapidement, 
lorsque j'ai souhaite les mettre en application sur mes sites professionnels. 
Une technologie comme CSS arrive dans un paysage complexe, dans lequel 
les navigateurs ne se comportent pas tous exactement comme ils le devraient, 
ou les developpeurs conservent des habitudes et des outils de creation encore 
peu adaptes a l'utilisation de ces techniques, et ou, pour finir, les metiers du 
Web sont encore en gestation. 

Comme toutes les technologies, HTML et CSS n'expriment leur plein poten- 
tiel que lorsqu'elles sont mises dans les mains de personnes qui les maitrisent 
en profondeur. Acquerir cette maitrise technique prend du temps et suppose 
un investissement initial. Cependant, le temps que vous investirez dans ces 
technologies, a commencer par celui que vous consacrerez a la lecture de cet 
ouvrage, constitue a coup sur un investissement utile et durable si vous voulez 
faire du developpement de sites web une activite veritablement efficiente. 

Elie Sloi'm, elie@temesis.com 

http://openweb.eu.org 

http://temesis.com 
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Avant-propos 



Les CSS, technique incontournable du design web 

Malgre plusieurs annees d'existence, la conception de sites web a l'aide des 
feuilles de styles CSS (Cascading Style Sheets) n'en est encore qu'a ses balbutie- 
ments. En effet, certaines techniques anciennes - dont la fameuse mise en page a 
l'aide de tableaux - restent encore solidement ancrees dans nos habitudes. 
D'autre part, et paradoxalement, le milieu des concepteurs de sites web, ou 
webmestres, est peut-etre Tun des plus frileux et reticents qui soient. 
Cette technique est pourtant depuis longtemps vivement conseillee par l'orga- 
nisme international gerant les langages et la normalisation du Web, le World 
Wide Web Consortium (W3C). 

J'ai pour ma part debute mes activites web en creant des pages a l'aide d'un logi- 
ciel dit WYSIWYG (What You See Is What You Get), generant automatique- 
ment un code HTML a partir d'une interface visuelle simple, digne d'un traite- 
ment de texte. Cet outil suffisait amplement a la mission qui lui etait confiee : 
m'eviter de mettre les mains dans le cambouis incomprehensible du code HTML 
et afficher mes pages sur le navigateur le plus courant. 

Neanmoins, ce qui vaut pour une page personnelle n'est pas toujours admissible 
dans le cadre d'un site professionnel, grand public ou a vocation commerciale. 
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Un tel projet ne peut se permettre de fermer ses portes a une certaine partie de la 
population, ni se cantonner a un navigateur unique et perdre une quantite non 
negligeable de clients potentiels. Plusieurs normes du W3C facilitent la compati- 
bilite des pages et assurent l'acces du site au plus grand nombre, y compris les 
personnes handicapees et les utilisateurs de navigateurs alternatifs. Les feuilles de 
styles CSS en font partie integrante et les sites web ainsi concus ne sont plus des 
cas isoles ou exceptionnels. 

Les grands sites mondiaux suivent le mouvement et se debarrassent de leur mise 
en page en tableaux. On peut citer Macromedia, AOL, MSN, Yahoo !, Amnesty 
International, ESPN, Chevrolet, Mercedes-Benz, Quark, Wired, Stern, Lycos, 
MP3.com, etc. Lun des exemples les plus representatifs est celui du celebre por- 
tail americain ESPN. Lauteur de sa refonte, Jeffrey Zeldman - dont vous trou- 
verez le site web dans les liens en fin d'ouvrage - explique qu'il n'est plus 
« risque » de passer aux standards. Si un site commercial de l'envergure d'ESPN, 
drainant pres de dix millions de lecteurs quotidiens, se permet de franchir ce pas, 
c'est que l'enjeu en vaut la chandelle. . . 



Pourquoi ce livre ? 

Ce livre est ne du constat d'un desequilibre entre la vigueur de la communaute 
francophone en matiere de feuilles de styles CSS et la pauvrete de l'offre en 
matiere de documentation dans la langue de Moliere. II faut en general se con- 
tenter de traductions d'articles et de quelques sites ou forums specialises dans le 
domaine des standards et des feuilles de styles (vous trouverez en annexe une liste 
de sites de reference). Aucun manuel original de conception web en CSS n'a 
encore ete publie, et les ouvrages des experts americains (par exemple 
Eric Meyer) ne sont pas encore tous traduits. 



Deuxieme edition 



Ce constat est aujourd'hui a nuancer : entre la premiere parution de cet ouvrage (en juin 2005) 
et I'edition que vous tenez entre les mains, de nombreux ouvrages francais ont ete publies dans 
le domaine de la conception web aux standards, ainsi que sur les langages XHTML et CSS. Vous 
trouverez une bibliographie a la fin de ce livre. 



Cet ouvrage n'a pas la pretention de revolutionner les choses, ne cherche pas a 
faire reference dans le domaine, ni a aborder les nombreux aspects complexes des 
feuilles de styles CSS. II constituera la premiere pierre d'un edifice que complete- 
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ront ensuite d'autres livres en francais plus developpes, plus recents, plus pointus. 
II aura rempli son role et satisfait son auteur s'il vous enseigne et inspire un peu. 
Nous explorerons ensemble les terres des styles CSS, encore largement vierges. 
Vous vous y etes sans doute deja risque, par exemple en changeant la couleur ou 
le soulignement des liens hypertextes. Ce n'est que la partie emergee d'un univers 
riche, qui vous ouvrira des portes que vous n'imaginiez sans doute pas. 



AVERTISSEMENT Ceci n'est pas un ouvrage sur les standards du Web 

Ce manuel traite avant tout de feuilles de styles CSS et de conception web. II ne mention- 
nera que brievement les diverses normes actuelles : langages HTML ou XHTML, JavaScript 
(ou ECMAScript), normes d'accessibilite aux handicaps, etc. On peut les resumer en trois 
groupes distincts : 

• la structure (determinee par le langage utilise : HTML ou XHTML) ; 

• le comportement (gere par JavaScript ou ECMAScript) ; 

• la presentation (c'est le role des styles CSS). 

Cet ouvrage traitera surtout du troisieme : la presentation du document, le design general, 
I'occupation de la page, bref, les feuilles de styles CSS. II evoquera neanmoins la structure et 
les balises HTML, dont la comprehension est indispensable a leur mise en forme avec les sty- 
les CSS. Sans jamais dissequer precisement chaque norme, il traitera de la conception de 
sites web par I'alliance entre le langage HTML et les styles CSS. 

Au risque de decevoir les mordus des standards, nous oserons parfois des methodes simpli- 
fies s'eloignant quelque peu des rigueurs excessives des specifications. D'ailleurs, les stan- 
dards sont parfois evasifs voire flous. 

Les techniques presentees (notamment pour le positionnement) seront toujours conformes, 
mais rarement la seule solution menant au resultat recherche : on compte au moins six 
manieres de mettre en place un element a I'aide des feuilles de styles CSS. L'expose, simple 
et pragmatique, ne pourra pas toujours prendre en compte tous les cas particuliers. 



Ce livre ne va pas vous mentir 



CSS n'est pas l'herbe du Pantagruelion capable de resoudre tous les problemes 
d'affichage, mais ses points faibles sont moins nombreux que les inconvenients 
issus des techniques anciennes, notamment a base de tableaux. Son manque de 
recul lui interdit encore certaines folies visuelles, qui pourront s'averer possibles 
avec les methodes de la vieille ecole. 

L'honnetete intellectuelle sera constante et les promesses toujours tenues. Tous 
les navigateurs n'ont pas encore assimile les dernieres proprietes des feuilles de 
styles. C'est notamment le cas d'Internet Explorer, qui n'a plus evolue en matiere 
de conformite CSS depuis 1999 et la sortie de sa version 6. En attendant de nou- 
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velles versions plus correctes, les anciens navigateurs imposeront done un certain 
nombre de precautions. 



Deuxieme edition 



A I'heure ou cette seconde edition est redigee, Internet Explorer 7 vient tout juste de voir le jour. 
Nous aborderons tout au long de cet ouvrage les corrections apportees par cette nouvelle ver- 
sion du navigateur de Microsoft. 



Cela explique la distinction operee ici entre les elements esthetiques, ne posant 
aucun souci de compatibilite, et les positionnements et comportements dynami- 
ques, interpreted etrangement par certains navigateurs. 

Nous ne detaillerons pas la syntaxe et les subtilites des instructions CSS. 
L'objectif restera constant tout au long des chapitres : apprendre a concevoir des 
pages web a l'aide des feuilles de styles. 



A qui s'adresse cet ouvrage ? 



La reponse a cette question decoule des professions de foi precedentes : pour 
apprecier pleinement les differentes techniques CSS proposees, il convient de 
connaitre un minimum le langage HTML sur lequel elles portent. 
Le premier chapitre entreprend malgre tout un « decrassage », car une remise a 
niveau sur ce point n'est pas superflue : beaucoup croient savoir HTML sans com- 
prendre vraiment ses balises et leur utilisation logique, qui depend de leur seman- 
tique. C'est pourtant une culture minimale indispensable a la conception en CSS, 
ou les erreurs les plus courantes proviennent d'une meconnaissance de ces aspects. 
Pour la meme raison, nous evoquerons brievement les notions de standards, de 
semantique, d'accessibilite aux handicaps et de compatibilite entre les differents 
navigateurs et plates-formes. 

Ce livre s'adresse aux etudiants en informatique et aux professeurs, formateurs, 
concepteurs et developpeurs web. II cible particulierement ceux qui, ayant des 
connaissances en HTML, souhaitent entreprendre la creation de sites web 
modernes, respectant les normes actuelles de langages et d'accessibilite. II con- 
cerne egalement les designers et graphistes, souvent peu rompus au code HTML 
et voulant decouvrir comment allier un graphisme haut en couleurs a une mise en 
page en CSS. 



Avant-propos 



Site web de I'auteur 

Vous pouvez echanger vos avis et commentaires et signaler tout erratum ou carence sur I'espace 
web devolu a ce livre. 

► http://www.alsacreations.com/livre 



Perimetre de l'ouvrage 



Nous passerons sur les bases et la syntaxe generale de CSS sans trop nous attarder 
sur les details et subtilites. Pour plusieurs raisons, cet ouvrage ne se veut pas une 
bible en matiere de syntaxe CSS : 

• II faudrait un bon millier de pages pour esperer faire le tour d'une matiere 
aussi volumineuse et touffue. 

• Internet propose deja de nombreuses references sur CSS ; vous en trouverez 
plusieurs en annexe. 

• Nous ne verserons pas dans le purisme, mais guiderons le lecteur en lui don- 
nant concretement, et pas a pas, des applications et methodologies pratiques 
pour concevoir des sites web. 

Le centre de formation Mediabox propose une documentation exhaustive sur les 
proprietes CSS : 

► http://wiki.media-box.net/documentation/css 

La traduction francaise officielle des normes du W3C est elle aussi une lecture 
vivement conseillee : 

► http://www.yoyodesign.org/doc/w3c/css2/cover.html 

Lannexe mentionne d'autres references officielles ou plus personnelles. Elles 
enumereront sites web, forums de discussion, weblogs, et bien sur une bibliogra- 
phic sommaire. 



Structure de 1' ouvrage 

Chacune de ses quatre parties remplit une fonction precise : 

1 introduction aux normes HTML et XHTML ; 

2 apprentissage des styles pour la mise en forme et le positionnement des 



elements ; 
3 travaux pratiques et exercices concrets ; 
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4 mise en oeuvre globale dans un projet de site web professionnel. 

La partie abordant les styles CSS comprend plusieurs chapitres de niveaux diffe- 
rents. Un premier niveau d'apprentissage concerne les syntaxes de base et 
l'emploi des styles pour la mise en forme et la typographic des documents. Un 
second niveau de pratique, independant, sera developpe dans le chapitre concer- 
nant le positionnement des elements en CSS. Quel que soit votre cas, les feuilles 
de styles CSS apporteront une valeur ajoutee a votre site. Chaque chapitre con- 
sacre aux styles CSS se conclura par des exercices de comprehension et renverra 
vers Tune des applications pratiques developpees par la suite. 

Rien n'oblige le debutant a supprimer immediatement toute mise en page par 
tableaux : CSS est une norme modulaire qu'on peut adopter peu a peu, en la limi- 
tant dans un premier temps au graphisme et a l'esthetique des elements. Les 
encarts vous ouvriront de nouveaux horizons en elargissant vos connaissances. 
Nous finirons par un projet complet avec lequel les webmestres debutants sont 
peu a l'aise : la creation d'un site professionnel mis en page en CSS, dote d'une 
charte graphique complete de l'habillage a la typographic, et d'une navigation 
adaptee et accessible au plus grand nombre. 

En conclusion de ce livre, vous trouverez plusieurs annexes utiles qui vous servi- 
ront de documents de travail pour aller plus loin dans la conception web en CSS. 
Ces annexes regroupent une liste complete des differentes proprietes CSS, quel- 
ques modeles de mise en page, des ressources diverses (sites web, bibliographic) 
ainsi qu'un tableau recapitulatif de la prise en charge de ce qui concerne 
XHTML et CSS en general par les navigateurs. 



Mises a jour de la seconde edition 



Vous tenez entre les mains la seconde edition de l'ouvrage, initialement publie en 
juin 2005. 

Le monde du Web est en constante evolution et apporte chaque jour son lot de 
nouveautes techniques et conceptuelles. 

Cette seconde edition a ete mise au gout du jour afin d'accompagner les dernieres 
ressources en date. Void les modifications effectuees : 

• mise a jour generale, ajout de commentaires et precisions nouvelles ; 

• encarts et description des fonctionnalites apportees par le navigateur Internet 
Explorer 7 ; 

• explication des differents Doctypes ; 
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encart specifique a la gestion des bogues des navigateurs, comment les isoler et 
les traiter ; 

encart sur les hacks et commentaires conditionnels ; 
encart sur le comportement haslayout ; 
mise a jour des annexes. 
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Premiere partie 



Standards HTML 
et XHTML : 
quelle difference ? 



Langages de structuration de l'information, les diverses versions de HTML 
(HTML, XHTML, XML) presentent des similitudes et des specificites notam- 
ment au niveau de leur rigueur d'interpretation. Cette partie a pour objectif 
d'etablir les fondations necessaires a la conception web normalised. On y traitera 
du langage HTML, mais aussi des notions d'accessibilite, de semantique et de 
standards, indispensables au traitement ulterieur par les feuilles de styles CSS. 



1 



Le W3C et les 
standards du Web 



Cet ouvrage recourra souvent aux termes « standard » (ou norme), « compatibilite » 
(ou interoperabilite), « accessibilite » et « semantique ». En effet, ces notions consti- 
tuent la cle de voute du bon fonctionnement du Web : elles revetent done une 
importance particuliere dans un traite exposant la bonne maniere d'ecrire des feuilles 
de styles CSS et de concevoir des pages web. 

Concevoir une mise en page en CSS ne trahit pas qu'une volonte de suivre revolu- 
tion du Web et de ses techniques. C'est aussi se conformer a des normes allegeant le 
code, facilitant les mises a jour et employant les divers elements d'une maniere plus 
« propre » (on evitera ainsi toute mise en page fondee sur des tableaux). 

Distinguer tres clairement le contenu de son apparence dans des styles CSS presente 
des avantages qui vous convaincront au fur et a mesure de votre avancee dans ce livre. 
La maintenance du code et son adaptation aux differents navigateurs et terminaux 
clients (notamment les outils pour handicapes) s'en trouveront facilities. HTML 
revient a son objectif premier : structurer logiquement les documents. 

Pour toutes ces raisons, nous aborderons ces questions de standards, compatibilite, 
accessibilite et semantique avant d'evoquer a proprement parler la conception de 
pages web et les feuilles de styles qui rendent son expression possible. 



Standards HTML et XHTML : quelle difference ? 

Premiere partie 

Ce qui fait tourner le Web en coulisses : les standards 

Les langages et syntaxes officiels du Web (HTML, XHTML, XML, CSS...) repo- 
sent sur des standards publies par des organisations de normalisation telles que le 
W3C (World Wide Web Consortium). Des experts y debattent en mettant l'accent 
sur les aspects techniques pour aboutir a des consensus et des principes coherents 
dans les architectures ainsi mises en place (voir figure 1-1). 



Figure 1-1 

Le site web du W3C 
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Respecter ces normes transfere aux navigateurs la responsabilite d'interpreter correc- 
tement le code. Lauteur de pages web beneficie ainsi des dernieres innovations et 
s' assure de la perennite des documents dans le futur. 



VOCABULAIRE Internet n'est pas (que) le Web 

Les medias et le grand public font souvent I'amalgame Web/Internet et utilisent les expressions « site 
Internet », « adresse Internet », etc. Dans cet ouvrage, nous serons plus precis : le Web n'est qu'un des 
reseaux enchevetres dans le cadre d'lnternet, oil Ton trouve bien d'autres services independants (FTP, 
courrier electronique, serveurs de temps, etc.). Le Web est sans doute la composante la plus connue et la 
plus populaire d'lnternet, mais il lui est largement posterieur... II a vu le jourau debut des annees 1990, 
plus de vingt ans apres les premiers pas d'Arpanet, ancetre alors confidentiel de I'lnternet actuel. 



Le W3C et les standards du Web 

Chapitre 1 

HTML, langage de description de la plupart des documents accessibles sur le Web, a 
connu plusieurs evolutions successives. Sa version 2 date de 1994 ; la version 3.2 a vu 
le jour en 1996. A cette epoque, c'etaient surtout les editeurs de navigateurs (Nets- 
cape puis Microsoft) qui imposaient leur volonte. L'annee 1996 a aussi vu eclater les 
hostilites commerciales entre ces deux societes, a l'occasion de la sortie de Netscape 
Navigator 3. 

Pour eviter au Web de se transformer en une tour de Babel contraire aux principes 
historiques de l'lnternet (libre acces aux donnees, interoperabilite, echange), le W3C 
a tente, par ses normes sur le langage HTML (2.0, 3.2, 4.0...), de suivre le mouve- 
ment et de retranscrire les fonctionnalites des principaux navigateurs. Le rapport de 
forces est aujourd'hui inverse, et les normes actuelles devancent desormais la plupart 
des navigateurs. 

Le standard s'appelle maintenant XHTML (1.0 et 1.1 pour ses versions courantes ; 
XHTML 2 est en cours de conception). Les feuilles de styles CSS 2 le completent. 
C'est une syntaxe plus rigide de HTML, cette rigueur favorisant la maintenance et la 
relecture du code. 



Les navigateurs parlent la meme langue 

La normalisation amorcee par le W3C recherchait principalement l'interoperabilite 
des documents web. II s'agit de les faire comprendre a tous les navigateurs, sur toutes 
les plates-formes (MS Windows, Unix, Macintosh) et outils (telephone mobile, 
assistant personnel, lecteur braille, etc.). 



DlVERSlTE Pourquoi s'embarrasser des autres navigateurs ? 

En observant des statistiques independantes aussi ecrasantes que le Google Zeitgeist 
de juillet 2004 (http://www.google.com/press/zeitgeist/zeitgeist-jun04.html), donnant 
MSIE 6.0 largement en tete des navigateurs utilises sur le Web, on pourrait etre tente 
de se focaliser sur ce produit, pensant se simplifier la vie. 

Ce serait une erreur, et ce choix n'allegerait pas vraiment le travail, tout en apportant 
son lot d'inconvenients : utilisateurs exclus et frustres, aucune garantie sur 1'evolution 
des futures versions du navigateur ni de la politique commerciale (ou la survie) de son 
editeur, faible visibility sur 1'evolution des statistiques et profils d'utilisation du Web (et 
notamment sur le role des clients legers et nomades). IE sera corrige la ou il peche 
encore dans son respect des standards; d'eventuelles solutions de contournement ne 
seront done que temporaires. Mettre en place une structure de site logique et solide 
evitera de sans cesse sur le metier remettre son ouvrage, comme e'etait le lot regulier 
des designers web des annees 1990. 



Standards HTML et XHTML : quelle difference ? 

Premiere partie 

Conscients de cette necessite, les editeurs de ces programmes les rendent peu a peu 
conformes aux standards du Web. C'est pourquoi la grande majorite des navigateurs 
interpretent desormais assez bien, voire parfaitement, ces differents langages. On 
peut rarement en dire autant de leurs anciennes versions... 



LlMlTES Compatible ou presque compatible ? 

Comme annonce en introduction, nous viserons I'honnetete intellectuelle. Cela nous oblige a signaler la 
pietre compatibilite avec les standards du Web du navigateur de Microsoft le plus employe a I'heure 
actuelle : Internet Explorer 6 (ou IE 6). Celui-ci presentant plusieurs carences notables sur ce plan, il ne 
suffit pas de developper selon les normes pour assurer I'interoperabilite d'un site web avec IE 6, comme 
nous en verrons quelques exemples pratiques plus loin. Nous decouvrirons egalement que la derniere 
version de ce navigateur (IE7) fait de gros progres en termes de conformite et comble plusieurs lacunes 
de son predecesseur. Voir aussi I'annexe F, « Compatibilite des navigateurs ». 



Le respect de ces recommandations assure non seulement l'accessibilite d'un site sur 
la majorite des navigateurs actuels, mais garantit surtout sa perennite. En effet, il est 
risque d'utiliser du code approximatif et des balises obsoletes ou proprietaires, car ces 
techniques ne sont plus reprises dans les normes actuelles du langage HTML telles 
que definies par le W3C. Ces habitudes datent du temps des conflits entre les deux 
grandes puissances Microsoft et Netscape, mais ont desormais depasse leur periode 
de prise en charge et ne sont plus « sous garantie ». 



NORME Balises obsoletes et proprietaires 

Les normes evoluent, car leurs concepteurs n'ont pas toujours le recul necessaire lors de leur redaction 
pour apprecier I'avenir du domaine. Parfois, et malgre le soin apporte a leur realisation, elles sont 
« boguees » et la version suivante corrige le tir. Meme s'il est necessaire de prevoir des periodes de tran- 
sition (les anciens documents devant rester valides suffisamment longtemps pour laisser a leurs auteurs 
le temps de s'adapter), c'est une impasse que de s'enteter a garantir a vie tout choix du passe qui s'avere 
desormais errone ou inutile. C'est pourquoi le W3C declare parfois certaines balises deprecated, ou 
« obsoletes ». 

Une balise « proprietaire » est un element absent de la norme qu'un editeur de navigateur web introduit 
dans I'espoir de devancer la concurrence. Si seul son produit est capable d'interpreter correctement tel 
effet special et si suffisamment de sites web en font usage (encourages en cela par le produit de redac- 
tion de site web de la meme gamme), les concurrents perdront du terrain et seront forces d'introduire 
cette fonctionnalite dans la prochaine version de leur programme. Cette tactique d'entreprise, classique 
dans les annees 1 990, est en voie de disparition. Les editeurs ont maintenant compris I'interet de respec- 
ter des grammaires communes. 



En d'autres termes, leur eventuel bon fonctionnement actuel est un heritage du 
passe, qui ne prejuge en rien de leur prise en charge future, dans les nouvelles ver- 
sions ou les nouveaux navigateurs. 



Le W3C et les standards du Web 

Chapitre 1 

Pour un Web accessible a tous 

L'ambition d'universalite du Web ne concerne pas que les machines et les logiciels : 
tous les etres humains devraient pouvoir y acceder, dans la mesure de leurs moyens, 
sans barrieres artificielles. Cela concerne aussi les personnes souffrant de handicaps, 
quelle que soit leur nature (physique, auditif, visuel ou moteur). II existe a cet effet 
des standards et des normes d'accessibilite du Web, dites WCAG : 
► http://www.w3.org/WAI/ 
On peut classer les handicaps affectant faeces au Web en quatre categories : 

• Les deficiences visuelles rassemblent les aveugles, malvoyants, daltoniens et por- 
teurs de lunettes. Les illustrations depourvues d'intitule ou de texte de remplace- 
ment, les polices de caracteres trop petites ou les couleurs peu contrastees limitent 
alors Faeces a l'information. 

• Les deficiences auditives des sourds ou malentendants les empecheront de profi- 
ter de certaines informations si le createur du site n'a pas prevu a leur effet des dis- 
positions d'accessibilite. 

• Des handicaps physiques genent certains utilisateurs dans le maniement du cla- 
vier ou de la souris. Ceux-ci seront done exclus de tout site exigeant de pointer 
avec precision de petits elements ou imposant la souris pour interagir avec leurs 
scripts et menus. 

• Les deficiences mentales ou neurologiques ralentiront certains en l'absence de 
reperes clairs et precis. Un systeme de navigation non intuitif pourra lui aussi 
troubler de nombreux utilisateurs. Labus d'effets visuels comme les clignotements 
ou les animations de frequence elevee peut quant a lui avoir de graves consequen- 
ces sur des sujets sensibles ou epileptiques. 

Les personnes souffrant d'une gene ou d'un handicap representent 7 a 40 % de la 
population selon le type de gene considere. Ces proportions augmentent chez les 
personnes agees. 

On estime que 10 a 20 % des individus presentent telle ou telle deficience dans la 
plupart des pays dits « developpes ». Certains handicaps ne genent pas l'acces au 
Web, mais la plupart nous concernent tous potentiellement. 

Tout lieu public se doit d'etre accessible a tous, handicapes ou non. Les cahiers des 
charges concernes comportent desormais ces obligations. Pourquoi en irait-il autre- 
ment du Web ? 

Pour un Web accessible a tous, le W3C a publie en 1997 une initiative (dite WAI) 
visant a garantir la prise en charge des questions d'accessibilite par les nouvelles tech- 
nologies. 



Standards HTML et XHTML : quelle difference ? 

Premiere partie 



Textes Loi sur l'accessibilite 

L'agence federale americaine pour le handicap considere que I'obligation d'accessibilite aux lieux publics 
s'applique aussi a tous les sites web. La « Section 508 » (http://section508.gov/) impose deja I'acces- 
sibilite des handicapes aux sites gouvernementaux de plusieurs pays (et a ceux qui sont finances en par- 
tie par le gouvernement, notamment ses fournisseurs). 

En France, la loi n° 2005-1 02 du 1 1 fevrier 2005, pour I'egalite des droits et des chances, la participation 
et la citoyennete des personnes handicapees, publiee au J.O. n° 36 du 1 2 fevrier 2005 page 2353, prevoit 
des regies semblables dans son article 47 : 

« Les services de communication publique en ligne des services de I'Etat, des collectivites territoriales et 
des etablissements publics qui en dependent doivent etre accessibles aux personnes handicapees. 
L'accessibilite des services de communication publique en ligne concerne I'acces a tout type d'informa- 
tion sous forme numerique quels que soient le moyen d'acces, les contenus et le mode de consultation. 
Les recommandations internationales pour l'accessibilite de I'lnternet doivent etre appliquees pour les 
services de communication publique en ligne. » 

Son texte est disponible en ligne a I'adresse : 

► http://www.legifrance.gouv.fr/WAspad/UnTexteDeJorf?numjo=SANX0300217L 



C'est dans cette optique qu'ont ete redigees les 14 directives du WCAG (Web Con- 
tent Authoring Guidelines). Elles decrivent les principes generaux d'accessibilite et 
detaillent les points a respecter, selon divers niveaux de priorite : 

• Niveau 1 : obligation. La consigne doit etre satisfaite. C'est le niveau minimal 
requis pour assurer un seuil d'accessibilite au plus grand nombre. 

• Niveau 2 : recommandation. La remarque devrait etre suivie. 

• Niveau 3 : suggestion. Detail qui pourrait etre pris en compte. C'est le plus haut 
niveau d'accessibilite : il traite de tous les handicaps. 

La conformite a ces trois niveaux est codee comme suit : 

• un site « A » repond a toutes les exigences d'un point de controle ; 

• un site « AA » satisfait deux points de controle ; 

• un site « AAA » se conforme a tous les points de controle. 



0UTILS Valider l'accessibilite d'un document 

II existe sur le Web plusieurs outils de validation permettant de tester le niveau d'accessibilite d'un docu- 
ment : 

• WebXact : http://webxact.watchfire.com/ 

• Wave 3 : http://www.wave.webaim.org/ 

• Cinthia's Report : http://www.contentquality.com/Default.asp 

• Acces-pour-tous : http://www.acces-pour-tous.net/ 

Attention, ces outils ne permettant qu'une validation partielle, ils ne constituent qu'une premiere etape 
dans la demarche d'accessibilite. Tous les niveaux ne sont pas controlables par des outils automatiques. 
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La liste des points a respecter occupe trop d'espace pour etre reprise ici, mais nous 
pouvons en resumer les principales directives : 

• Ne jamais poser de limites a la navigation : un menu exclusivement graphique, 
utilisant des outils proprietaires, reposant sur des scripts ou necessitant des plug- 
ins (Java, Flash, JavaScript) est a eviter, a moins de proposer une autre solution, 
fonctionnelle sans ces outils. 

• Eviter les structures de pages utilisant des cadres (frames, iframes) ou tableaux, 
veritables ecueils pour les visiteurs non voyants. 

• Toujours proposer des solutions equivalentes au contenu visuel et sonore : texte de 
remplacement pour les images (alt), navigation sans souris ou sans clavier 
(access key, tabindex), liens hypertextes explicites (title), etc. 

• Ne pas s'en remettre exclusivement aux couleurs et permettre d'augmenter la taille 
du texte (c'est utile aux malvoyants). 

• Utiliser un balisage semantique pour offrir une structure coherente, meme si 
l'aspect visuel est absent ou degrade. Respecter les normes de langage en vigueur 
proposees par le W3C et separer le contenu (HTML) de la mise en forme (CSS). 

Sens et semantique sur le Web 

Les documents du Web seront d'autant plus accessibles et faciles a maintenir qu'ils 
seront balises « semantiquement », c'est-a-dire en fonction de leur structure logique 
et non pas en se focalisant sur l'aspect recherche. 

Un document web bien ecrit respecte d'abord un certain nombre de regies de syn- 
taxe, souvent rappelees, mais son aspect semantique est moins connu. Tout validateur 
de syntaxe acceptera sans coup ferir un tableau bien ecrit, meme si celui-ci a pour 
seul but d'obtenir une certaine mise en page... Cet element est pourtant theorique- 
ment reserve a la presentation de donnees en relation les unes avec les autres 
(tableaux a une ou deux entrees), et ha en aucun cas un role d'organisation de la 
maquette du document. 

La semantique d'un document concerne done ce qui releve plutot de la qualification 
fonctionnelle de son contenu, par opposition a sa forme organique. Elle s'interesse au 
type de donnees d'un objet, a son utilite, a ce qu'il contient, etc. 

Sur le Web et en HTML aussi, chaque element est porteur de sens. II convient 
d'employer chaque balise a bon escient et non selon son rendu visuel par defaut. 

Lerreur la plus frequente consiste a utiliser une balise de paragraphe <p> pour le titre 
du document (<hl> en temps normal). Pour arriver a ses fins, l'auteur applique 
ensuite a ce « paragraphe » l'apparence d'un titre : taille de texte, graisse, centrage, 
marges, etc. Si le resultat visuel final est celui d'un titre, la semantique de cet element 
reste malgre tout celle du paragraphe ! 
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Sans etre une heresie, cette technique renie les principes memes du langage HTML : 
decrire le contenu du document et sa structuration logique. 

Une semantique correcte et independante de la mise en forme structurera mieux le 
document, qui sera ainsi plus facile a interpreter par les differents navigateurs, 
moteurs de recherche et lecteurs braille (lesquels ne s'embarrassent guere de la pre- 
sentation reelle). 

Une semantique scrupuleuse permettra aussi d'automatiser l'exploitation du contenu de 
la page par des programmes tels que les « agents » autonomes parcourant le Web a la 
collecte d'informations - c'est le cas des robots d'indexation des moteurs de recherche. 



Science-fiction L'intelligence artificielle n'existe pas 

La notion de validateur de semantique est difficile a imaginer : aucun logiciel ne pourra deviner qu'un 
paragraphe est cense etre un titre. 

C'est done a I'auteur de bien formaliser la structure de ses pages et d'attribuer a chaque element la signi- 
fication adequate. Par exemple : <hl> pour le titre principal, <u"l> et <"li> pour les listes de liens 
(menus), <b"lockquote> et <q> pour les citations, etc. L'ensemble des balises HTML sera decrit dans 
le chapitre 2, « Separer le fond et la forme avec HTML et CSS ». 



Le balisage semantique implique une bonne connaissance des elements disponibles 
et de leur signification, culture dont sont depourvus la plupart des webmasters ama- 
teurs ou debutants. Ceux-ci recourent alors a un balisage pauvre et se limitent a trois 
ou quatre balises generiques et inadaptees. 

On rencontre ainsi des documents composes de multiples blocs <div> inutiles, ou 
dont tous les textes (titres, sous-titres, paragraphes, notes, citations, etc.) sont balises 
par 1' element de paragraphe <p>. 

Malheureusement, ces cas abondent sur la Toile, ou de nombreux designers font appel 
a des logiciels WYSIWYG ( What You See Is What You Get) tels que Dreamweaver ou 
Golive. Le code automatique ainsi genere employant massivement des elements neu- 
tres plutot que des balises pourvues d'un sens, il est loin d'etre semantique. 

En resume : avantages des standards et d'une semantique sur le Web 

• Les standards favorisent la creation de sites originaux, jolis, dynamiques, develop- 
pes dans les regies de Fart et aux contenus clairement dissocies de la presentation. 

• Developper dans le respect des normes, c'est ouvrir son site a toute plate-forme, 
tout systeme d'exploitation, tout navigateur ou agent utilisateur actuel ou a venir, 
pour peu que ces outils comprennent et appliquent les standards du Web. Peu a 
peu, cela couvrira une large gamme de produits (assistants personnels, telephonie 
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mobile, television interactive, domotique, etc.). Un document HTML conforme 
sera done exploitable par de multiples outils en dehors d'un ordinateur de bureau. 

• Par leur insistance sur la semantique du balisage des documents, de nombreux 
standards facilitent faeces au Web aux personnes souffrant de divers handicaps 
(visuels, moteurs, auditifs, etc.). C'est d'ailleurs sur ce balisage semantique que 
des moteurs de recherche comme Google s'appuient. 

• Meme les navigateurs anciens ou limites (Netscape 4, lecteurs braille, navigateurs 
en mode texte comme Lynx) pourront acceder aux sites construits dans le respect 
des normes, puisque leur structure est differenciee de leur contenu. 

• En separant les aspects editoriaux et de mise en page, les standards du Web alle- 
gent le code et en accelerent le rendu : HTML strict ne contient en effet aucune 
indication de style. Les effets de design sont places a part, dans une « feuille de 
styles », conservee en memoire cache de l'ordinateur. Cette technique reduit le 
volume transfere et realise done des economies de bande passante. 

• La maintenance et la mise a jour des sites ecrits dans le respect des standards s'en 
trouvent facilitees : la maquette, placee a part, tient sur une seule page (voir a ce 
sujet le site CSS Zen Garden : http://www.csszengarden.com/, qu'un clic de souris 
permet de rhabiller integralement, des centaines d'apparences etant disponibles). 

• La lecture du contenu est facilitee : chaque balise y est employee a bon escient, sans 
superflu ni elements neutres (comme <di v>) - qui sur-structurent le contenu inuti- 
lement. II est notamment expurge de toutes les petites « bidouilles » classiques 
(multiples tableaux imbriques, col span, rowspan et images de type spacer . gi f ). 

• Toutes ces raisons (allegement du code, reduction de la bande passante necessaire, 
simplification des mises a jour et des refontes graphiques completes) permettront 
done aux entreprises optant pour les standards du Web de realiser de substantiel- 
les economies. 

• Lapprentissage de la programmation dans le respect des normes n'est pas plus 
difficile que celui de HTML classique sans CSS. Par consequent, pourquoi ne 
pas gagner du temps et travailler correctement des le debut ? 



VOCABULAIRE Elements bloc et inline 

On peut classer les balises (X)HTML en deux families principales. Certaines mettent en place un objet 
dans la page : elles sont de types « bloc » (exemple : paragraphe, tableau, titre). D'autres ne portent que 
sur une portion de mot ou de phrase, en agissant par exemple sur sa couleur, sa police, ou d'autres carac- 
teristiques organiques comparables dans des agents utilisateur moins traditionnels (comme I'intonation 
de la voix dans un lecteur braille). Ces dernieres sont dites inline en anglais ; on pourrait traduire cela par 
« au fil du texte » ; dans cet ouvrage nous les qualifierons d'elements « en ligne ». 
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PlEGE Trop de div tue le div ! 

L'ere des mises en page en tableaux imbriques est revolue : c'est I'association de bali- 
ses <div> aux styles CSS qui prend la releve et permet la mise en forme des docu- 
ments. 

Cette nouvelle mode apporte fatalement son lot de fanatismes, incomprehensions et 
mauvaises utilisations. La paresse simplificatrice naturelle de I'homme fait conclure a 
de nombreux designers :« bien, la nouvelle lubie consiste done a remplacer les 
tableaux par des div ». Cette analyse baclee produit mecaniquement des documents 
comptant autant de div que leurs predecesseurs comptaient de cellules de tableaux, 
ce qui n'a evidemment aucun interet. Ces cancres ont alors beau jeu de se plaindre et 
de denoncer I'inutilite de CSS. 

Ce phenomene est malheureusement souvent observe : ceux qui n'en comprennent 
pas la logique utilisent des elements div a toutes les sauces, en les imbriquant et en 
creant une multitude de sous-blocs... ce qui n'est pas une fin en soi. 
Les inconvenients sont nombreux : mises a jour difficiles, code alourdi inutilement et 
rendu incomprehensible a autrui, ainsi qu'a son propre auteur apres quelque temps. 
Tel est le prix a payer pour la sur-structuration en HTML. 

Rien de tel qu'un exemple parlant pour illustrer ce type de debordements : 

<div class="gauche"> 

<div class="menu"> 

<u"l> 

<lixa href="#">Lien l</ax/"li> 

<lixa href="#">Lien 2</ax/"li> 

<lixa href="#">Lien 3</ax/1i> 

<lixa href="#">Lien 4</ax/1i> 

</u1> 

</div> 

</div> 

Le menu (bloc <u"l>) est imbrique dans un div "menu", lui-meme place dans un div 
"gauche"... tous deux sont pourtant inutiles ! II suffisait ici de doter la balise impor- 
tante (<u"l>) des attributs concernes : c'est en effet possible pour tout element de 
niveau bloc. 

<ul class="menu gauche"> 
<lixa href="#">Lien l</ax/1i> 
<lixa href="#">Lien 2</ax/1i> 
<lixa href="#">Lien 3</ax/li> 
<lixa href="#">Lien 4</ax/1i> 
</ul> 

La morale ? N'oubliez pas que de nombreuses balises mettent en place des blocs : 
<p>, <u"l>, <1i>, <hl>...<h6>, <blockquote>... 
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Le recours a I'element <ch'v> ne doit pas etre un reflexe conditionne. Vous ne realise- 
rez des economies et n'ecrirez un code propre et comprehensible qu'en employant 
chaque balise a bon escient. 

C'est tout I'esprit de la semantique des balises : <p> structure des paragraphes, <hl> 
a <h6> des niveaux de titres, <u"l> des listes et des menus, etc. On peut les voir 
comme des macros predefinies : <p> remplacerait <div role="paragraph">, etc. 
Evitez done de surcharger votre code de <div> inutiles et autres balises superf lues ; il 
ne s'en portera que mieux. Ainsi allege, il sera bien plus facile a relire. 



HTML ou XHTML ? 

Dans cet ouvrage nous emploierons indifferemment les termes HTML et XHTML 
pour designer le langage de codage des documents du Web - XHTML n'est en effet 
qu'une reformulation de HTML en XML. XML est un meta-langage, e'est-a-dire 
un ensemble de regies a respecter pour qu'une grammaire de langage puisse se 
reclamer de cette norme. Quelques implementations fameuses de XML : DocBook 
(documents techniques), MathML(formules mathematiques), RDF (description des 
contenus par leurs meta-donnees comme auteur, titre, description), SVG (descrip- 
tion de figures), etc. 

La difference principale entre HTML et XHTML est syntaxique, ce dernier etant 
bien plus rigide. C'est pourtant cette rigueur qui lui donne toute sa souplesse, et en 
multiplie les applications. 

Syntaxe generate du XHTML 

La grammaire du XHTML repond a un certain nombre de regies, pour la plupart 
fondees sur l'absence d'implicite, une grande regularite et un « bon parenthesage » du 
document : 

• Les noms des balises et des attributs sont ecrits en minuscules. 
Exemple : on ecrit : <p> et non plus <P>. 

• Les valeurs des attributs sont placees entre apostrophes simples ou doubles. 
On ecrira : <p class="center"> au lieu de <p class=center>. 

• Tout attribut doit imperativement recevoir une valeur. 

<input type="checkbox" checked="checked" /> remplacera ainsi 
<input type="checkbox" checked>. 

• Toute balise ouverte doit etre refermee. 

On ecrira done : <p>Bonjour.</p> au lieu de <p>Bonjour. 
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• Les balises vides doivent etre explicitees. 

Exemples : <br /> supplantera <b r> et <h r id="top" /> est le successeur de 
<hr id="top">. 

• Les balises seront correctement imbriquees (et le document, « bien parenthese »). 
II semble plus logique de preferer <pxi>Bonjour</ix/p> au bancal 

<pxi>Bonjour</px/i>. 

Tout document se conformant strictement a ces regies sera dit « bien forme » syn- 
taxiquement et respectera la grammaire XHTML. 

Indiquer la grammaire au navigateur 

II existe plusieurs versions du langage HTML, cohabitant sur le Web. On indiquera 
aux navigateurs la version retenue pour un document donne en prefacant celui-ci 
d'un doctype accompagne d'une DTD, ou « definition de type de document ». C'est 
cette DTD qui definit la grammaire precise du document. 

Ce doctype est un code specifique place au tout debut d'un document HTML. II 
precise au navigateur le langage retenu pour l'ecriture de la page : HTML ou 
XHTML, en version stricte ou transitionnelle, etc. 

C'est non seulement un moyen de s' assurer que le document sera bien interprete par 
les navigateurs, mais aussi un element indispensable a sa validation par l'organisme 
de reference, le W3C. 

XHTML (et HTML) existent en deux versions principales : 

• Transitional (transitionnelle), version prevue pour realiser la transition vers la ver- 
sion strict, est par consequent beaucoup plus permissive que cette derniere. 

• Strict est la version rigoureuse que nous utiliserons. Beaucoup d'elements ou 
d'attributs y sont devenus obsoletes (et interdits). II s'agit notamment des balises 
et proprietes de mise en forme (<center>, <font>, "align"...). Le but est de 
pousser les developpeurs a utiliser le CSS pour la presentation et de limiter le 
document HTML au seul contenu. 

On trouve encore d'autres doctypes, proposant par exemple les cadres (frames), mais 
nous les eviterons car ces techniques sont a deconseiller et entravent l'accessibilite des 
sites web. 



EviTER A propos des cadres 

Rien de tel qu'un expose argumente pour convaincre le lecteur sceptique de la nocivite des cadres. Voyez 
a ce sujet 1'excellent article du site de reference OpenWeb a I'adresse : 

► http://openweb.eu.org/articles/finir_cadres/ 
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A l'heure actuelle, il existe sept doctypes, tous aussi valides et conformes selon le 
W3C: HTML 4.01 frameset, HTML 4.01 transitional, HTML 4.01 strict, 
XHTML 1.0 frameset, XHTML 1.0 transitional, XHTML 1.0 strict et 
XHTML 1.1. 

Le concepteur web est libre de choisir son doctype selon ses besoins et convictions. 
Par exemple, les versions frameset autorisent les cadres et les versions transitionnelles 
permettent d'inserer des elements de mise en page au sein du code HTML. La diffe- 
rence entre chaque doctype est resumee dans un article en ligne de Laurent Denis : 
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir 

Cet ouvrage emploiera generalement la syntaxe du doctype XHTML strict afin de se 
referer au document le plus rigoureux possible. Par consequent, nos documents web 
debuteront generalement par : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

Cette formulation est precise et rigoureuse (elle mele notamment des balises et des 
parties en majuscules). Pour eviter d'eventuelles erreurs, contentez-vous de la copier- 
coller dans vos creations. 



NORME DTD XHTML 1.1 

A titre indicatif, signalons I'existence de la DTD XHTML 1.1, modularisation de XHTML 1.0 strict. Elle 
pose quelques contraintes supplementaires et nous ne I'utiliserons pas dans le cadre de cet ouvrage 
d'introduction. 

Le passage de XHTML 1 .0 a XHTML 1 .1 marque une transition nette vers le langage XML. Ces deux ver- 
sions se distinguent nettement au niveau de la declaration de contenu. II ne suffit pas de choisir le bon 
doctype pour qu'un document XHTML 1.1 soit valide ; les documents XHTML 1.1 servis en "text/ 
html " sont invalides. 



Indiquer la langue et l'encodage du document : lang et charset 

La petite bureaucratie virtuelle des normes du Web impose d'autres declarations 
obligatoires dans l'en-tete de tout document HTML : les specifications de langue et 
d'encodage. Survolons-les rapidement. 

La langue du document est precisee dans la balise <html> comme suit : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" xml :lang="fr" lang="fr"> 
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L'encodage est specifie dans l'espace delimite par les balises <head> et </head>, a 
l'aide de l'attribut charset. Par exemple : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 
<head> 

<ti tl e>ti t re evocateu r</ti tl e> 
<meta http-equiv="Content-Type" 

content="text/html ; charset=iso-8859-15" /> 
</head> 

L'encodage du document indique aux navigateurs les caracteres potentiellement uti- 
lises dans le texte de la page. Pour un document en francais, on pourra choisir entre : 

• iso-8859-1 qui est l'encodage classique, presque complet pour les langues de 
l'Europe occidentale ; 

• iso-8859-15 qui complete le precedent par quelques caracteres supplementaires, 
tels que le signe € ou le caractere ce ; 

• utf-8 qui permet d'utiliser la plupart des caracteres de la majorite des langues du 
monde : c'est un code de l'Unicode. 



Culture Unicode 

Pour s'echanger des donnees, notamment textuelles, les ordinateurs doivent s'accorder sur la maniere de 
les representer (ou encoder), lis ne connaissent en effet que les nombres : comment associer a chaque 
caractere son numero ? La multitude des conventions inventees localement a subi une premiere unifica- 
tion avec I'avenement de I'lnternet dans les pays occidentaux dans les annees 1970 : c'est le code ASCII 
qui numerotait les vingt-six lettres de I'alphabet, les chiffres et quelques signes typographiques ou codes 
de controle supplementaires. II fut etendu differemment selon la zone geographique pour prendre en 
compte les signes diacritiques des diverses langues. L'entree de cultures aux systemes d'ecriture moins 
classiques dans le cercle de la communication a bouleverse ce fragile equilibre ; c'est desormais Unicode 
qui vise a centraliser les dizaines de milliers de caracteres existant dans tous les systemes d'ecriture. On 
peut desormais meler tout sous-ensemble de langues du monde dans un meme document. 



Valider son site avec le VY3C 

Pour realiser un site conforme aux standards du Web, il faut : 
• Preciser la version de HTML ou de XHTML utilisee. On l'indiquera par un 
doctype en debut de document, comme nous venons de le voir. 
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• Se conformer a la grammaire retenue. Pour l'aspect syntaxique, les validateurs du 
W3C conviendront, mais aucun programme ne peut garantir ou controler la 
bonne semantique des balises d'un document. 

Comme le validateur (X)HTML (http://validator.w3.org/) ou le validateur CSS 
(http://jigsaw.w3.org/css-validator/), des outils en ligne vous aideront a vous conformer 
aux regies du langage correspondant au doctype choisi pour le document. 

Ces programmes analysent les documents web qu'on leur fournit et indiquent 
diverses erreurs commises par rapport au doctype stipule ((X)HTML Transitional, 
Frameset on Strict). Sauf bogue improbable du validateur, chaque indication sera per- 
tinente et il conviendra de la prendre en compte. 

Confronte a un document construit proprement, sans erreur de balises, imbrications 
hasardeuses ni recours a des proprietes non autorisees ou obsoletes, le validateur affi- 
chera une page de felicitations confirmant ainsi la bonne conformite au doctype retenu. 

WIS" Q^^ Markup Validation Service vo .6.7 Jm&^ 
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Figure 1-2 

Le validateur de code (X)HTML du W3C 

Pvien n' oblige un developpeur a se conformer a une norme, mais ce choix presente 
plusieurs avantages : assurance de la perennite du site, affichage correct sur une plus 
large gamme de navigateurs, meilleure accessibilite, etc. 

Un site respectant les normes « strictes » sera plus rigoureux et facile a faire evoluer 
vers des normes a venir. Malheureusement, il sera plus difficile d'en assurer un rendu 
satisfaisant tant sur les anciens navigateurs que sur les nouveaux. 
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Premiere partie 



Culture La mission du W3C 

Le W3C ne se limite pas a creer et maintenir des langages du Web. Sa mission, telle qu'il I'a definie, est 
de mener celui-ci a son potentiel maximal. Cela passe par sept fronts principaux : acces universel, Web 
semantique, confiance, interoperability evolutivite, decentralisation, multimedia interactif. 
Quelques societ.es tres influentes composant le W3C (Microsoft, Mozilla, Opera, entre autres), on peut 
raisonnablement penser que le souhait de normalisation n'est pas une utopie. 
Vous trouverez des informations (en anglais) a I'adresse : 
► http://www.w3.org/2002/07/W3Cin7PointsTranslations.html 



Gardez a l'esprit que passer l'etape de validation est une condition necessaire mais en 
aucun cas suffisante. C'est un test mecanique qui ne controle que la syntaxe. De 
meme qu'on peut imaginer des phrases grammaticalement correctes mais depourvues 
de sens en francais (exemple : « D'incolores idees vertes dorment furieusement »), il 
est tout a fait possible qu'un document web organiquement correct emploie les 
balises a tort et a travers. En particulier, il est impossible au validateur de verifier si 
vous avez utilise les bonnes balises au bon endroit, de savoir si votre <p> est bien un 
paragraphe et non un titre (<hl>), etc. 

Rien ne s'oppose, par exemple, a la definition d'un bloc de 70 000 pixels de haut. 
C'est propre et valide, mais cela n'a aucun sens. On enchainera done sur la prise en 
compte d'autres parametres essentiels, comme la semantique : 
http://openweb.eu.org/articles/respecter_semantique/ 

Les validateurs d'accessibilite completeront avantageusement cet arsenal : 
http://www.acces-pour-tous.net/validateur/validateur.php 

Pour resumer, on peut dire que les normes et leurs validateurs ne regissent que 
l'aspect organique des documents. Leur interpretation et leur sens restent l'affaire de 
leur auteur. 



VOCABULAIRE « Recommandation » : un terme qui peche par modestie 

Le W3C encadre le travail de groupes d'experts qui elaborent ce qu'ils appellent des 
« recommandations » lors d'un processus formalise en plusieurs etapes. Ce mot est mal choisi : il s'agit 
en realite des standards du Web, qu'il convient de fait de respecter. Voir par exemple : 
► http://www.w3schools.com/w3c/w3c_intro.asp. 
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Testez vos connaissances 



Combien de navigateurs web existe-t-il dans le monde ? Combien en con- 
naissez-vous ? 

Combien de personnes souffrent de handicap visuel (et notamment de 
cecite) en France ? 

Quand fut cree le W3C (World Wide Web Consortium) ? 

O Quel attribut obligatoire rendra une image accessible aux non voyants ? 

- alt 

- title 

- info 

- desc 

- "longdesc 

Qui est considere comme le fondateur du Web ? 

- Jeffrey Zeldman 

- Bill Gates 

- Timothy Berners-Lee 

- Alan Turing 

Les balises <em> et <i> ont souvent la meme apparence visuelle. Pourquoi 
preferer I'une a I'autre, et laquelle ? 

O Quel est le site de reference en francais pour les standards du Web ? 

- www.cnil.fr 

- www.w3c.org 

- www.openweb.eu.org 



Vous retrouverez certaines de ces questions a I'adresse suivante 
http://www.tutoweb.com/quiz.php 



- Standards HTML et XHTML : quelle difference ? 

Premiere partie 

Reponses 

O II existe pres de 100 navigateurs web, dont certains sont deja obsoletes. 

Les navigateurs les plus courants du moment sont : Internet Explorer, Netscape 
Navigator, Mozilla, Firefox, Opera, Safari, Camino, Konqueror, Galeon, w3m, 
Lynx, Links (ces trois derniers fonctionnant en mode texte). 

Vous trouverez une liste complete des navigateurs sur le site : 
http://browsers.evolt.org 

La France compte plus de 1 500 000 deficients visuels (soit 2,6 % de la popula- 
tion), dont, en 1997, environ 110 000 aveugles (acuite visuelle inferieure a 1/20 
de la normale au meilleur ceil apres correction) et 250 000 malvoyants (acuite 
visuelle inferieure a 4/10). Source : Quid. 

Le W3C a vu le jour en 1 994. Vous trouverez des informations complementaires 
sur son site http://www.w3.org/Consortium/ 

© L'attribut alt est un minimum obligatoire. II permet aux non voyants de dis- 
poser d'un texte alternatif decrivant brievement I'image. 
Attention a ne pas confondre les attributs alt et title. Ce dernier est une info- 
bulle s'affichant lors du survol des elements par le curseur de la souris. La con- 
fusion vient du fait qu'lnternet Explorer affiche aussi une infobulle avec 
l'attribut alt. 

Timothy Berners-Lee est considere comme le pere fondateur du Web. 

Les balises <em> (« emphase ») et <i> (« italique ») ont souvent le meme effet 
dans les navigateurs graphiques. Leur interpretation differe pourtant, et le 
contenu mis en emphase sera plus facile a interpreter ou representer dans des 
contextes moins classiques. Pour resumer, <i> a une semantique de presenta- 
tion et <em> une semantique plus abstraite. 

Le site de reference en francais sur les standards du Web est 
www.openweb.eu.org, que je vous invite a parcourir sans moderation ! 
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Separer le fond et la forme 
avec HTML et CSS 



HTML signifie HyperText Markup Language. Cette abreviation de quatre lettres 
semble etre une reference inevitable sur le C. V. de tout webmestre qui se respecte. Et 
pour cause : il s'agit ni plus ni moins du principal langage du Web. II n'en va pas dif- 
feremment aujourd'hui des feuilles de styles CSS. 

Nombre de ces webmasters, meme professionnels, ne connaissent pourtant qu'une 
infime part de ce langage, leur pratique se limitant souvent a utiliser un logiciel 
d'edition web qui genere des documents HTML automatiquement. Cette limita- 
tion, vous le percevrez tout au long de cet ouvrage, est un reel frein au developpe- 
ment et a la conception de sites web dans un avenir ou le respect de normes rigou- 
reuses sera de plus en plus la regie. 

Nous n'allons pas ici retracer tout l'historique du HTML. Sachez simplement qu'il 
n'est qu'une application d'un standard bien plus ancien, le SGML. Ce dernier est un 
meta-langage, c'est-a-dire un ensemble de regies de grammaire a respecter par tout 
langage qui veut relever de sa famille. Concu pour structurer des donnees, SGML 
utilise en outre une syntaxe a balises {markup en anglais). Ces deux caracteristiques le 
distinguent de langages de programmation plus classiques tels que le C, PHP, etc. 
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La base du HTML : les balises 

HTML repose sur l'utilisation de balises et d'elements. 



Jargon Ne pas confondre elements et balises 

La confusion est frequente entre les termes « balise » et « element ». Nous precisons done la significa- 
tion de ces deux termes. 



Les balises, delimitees par des chevrons ouvrant et fermant < et >, qualifient des por- 
tions de texte. Sauf exception, elles fonctionnent par paires, et a chaque balise 
ouvrante correspond sa balise fermante, debutant par les caracteres </. Ces paires 
delimitent la portion de texte a laquelle elles s'appliquent. Parfois, une balise est 
refermee immediatement. Une telle « balise vide » ne delimite alors qu'un point, et 
non une zone du document. 

Un element est l'ensemble compose d'une balise ouvrante, d'un contenu (du texte et/ 
ou d'autres balises), et de la balise fermante correspondante. Void un exemple faisant 
intervenir la balise <strong>, qui permet de renforcer une partie de texte : 

' II ne faut <strong>jamais</strong> oublier de fermer les balises! 

Dans cet exemple, nous distinguons : 

• l'element <strong>jamais</strong> ; 

• le contenu d'element « jamais » ; 

• la balise ouvrante <strong> ; 

• la balise fermante correspondante </strong>. 

Le contenu « jamais », delimite par le couple de balises <strong> et </strong>, sera 
renforce par rapport au reste du texte - les navigateurs graphiques recourent pour 
cela a une police plus grasse. 

HTML propose toute une panoplie de balises pour structurer un document : para- 
graphes, titres, blocs, listes, tableaux, citations, etc. 

Dans la version stricte et moderne du langage, le nom des balises s'ecrit tout en 
minuscules. <Strong> et <STRONC> n'y sont done plus valables. 



Evolution Balises obsoletes 

De nombreuses balises HTML sont aujourd'hui deconseillees voire obsoletes. II s'agit de balises de mise 
en forme, fonction desormais devolue aux styles CSS. Ce cimetiere des balises oubliees comporte notam- 
ment <font>, <basefont>, <center>, <u>, <s>, etc. 



Separer le fond et la forme avec HTML et CSS 

Chapitre 2 



Les attributs 



Les balises acceptent parfois des caracteristiques supplementaires permettant de les 
distinguer ou de les personnaliser. Ces options s'inscrivent dans leur nom et sont 
appelees « attributs » (ou « proprietes »). 

Leur valeur est toujours entouree d'apostrophes simples (') ou doubles (")• 

Exemple : 

<hl id="monTitre">Bienvenue chez moi</hl> 

Ce code introduit un titre de premier niveau affuble d'une propriete id de valeur 
monTitre. La valeur de cet attribut, identifiant la balise, doit etre unique dans le 
document (nous y reviendrons). 

Les attributs sont indispensables pour distinguer les elements entre eux et pouvoir 
creer la mise en page du document a l'aide des feuilles de styles CSS. 



Evolution Attributs obsoletes 

Comme pour les balises, de nombreux attributs utilises dans les langages HTML non stricts ou anciens 
sont pour la plupart destines a la mise en forme des elements : align, valign, color, bgcolor, 
border, face, width, height. II est done dorenavant deconseille de les utiliser. Toutefois, pour des 
raisons de permissivite, ils sont encore toleres dans les doctypes transitional et frameset. 
Nous verrons dans les chapitres consacres a la mise en forme en CSS comment obtenir, a l'aide de styles, 
I'effet auparavant produit par ces attributs. 



L'imbrication des elements 

Les elements peuvent etre imbriques, a condition de former un « bon parenthesage » 
respectant la hierarchie, et en evitant de faire se chevaucher des balises ouvrantes et 
fermantes qui ne se correspondent pas. Par exemple : 

<hl id="monTitre">Bienvenue chez Toto <em>et moi</emx/hl> 

Nous sommes en presence d'un titre de premier niveau placant en emphase la por- 
tion de texte « et moi ». Cette particularite est souvent traduite par des italiques dans 
les navigateurs graphiques (ou par une police droite dans un texte deja en italique). 
Remarquez l'ordre des elements : la balise <em> s'ouvre et se ferme a l'interieur de 
1' element defini par la balise <hl>. 

Nous verrons plus loin que (presque) tous les documents web sont structures sous 
forme de balises a plusieurs niveaux d'imbrication. Cette structure constitue une 
arborescence globale qui debute par la premiere balise, racine du document : <html>. 
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Figure 2-1 

Exemple de code HTML produit avec le logiciel HTML-Kit 



La structure des elements 

La bonne comprehension de la structure des elements est indispensable. Elle aura de 
nombreuses applications par la suite, mais e'est paradoxalement un sujet rarement 
connu des webmasters. 

Les elements HTML ont chacun une structure particuliere. II en existe deux 
families : les elements de type bloc et les elements au fil du texte, dits en ligne (ou 
inline). Ce type dictera tous leurs comportements : positionnement, affichage, etc. 

La distinction fondamentale est assez claire. Les blocs distinguent des parties 
entieres comme des titres, des paragraphes, des listes, des citations, etc. Les elements 
en ligne sont prevus pour enrichir localement des portions de texte (lien hypertexte, 
emphase, renforcement, etc.). 

II en decoule des specificites d'affichage que nous detaillerons dans le chapitre 7, 
consacre au positionnement : 
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• Meme si dans le code HTML ils sont ecrits cote a cote, les elements de type bloc 
sont par defaut places Fun sous l'autre par le navigateur. Exemples : une suite de 
paragraphes (balise <p>) ou les elements d'une liste (balise <1 i>). 

• Les elements en ligne s'appliquent a des portions de texte, comme des groupes de 
mots dans une phrase. Par exemple : le renforcement d'une partie de texte a l'aide 
de la balise <strong>, comme vu precedemment. 

Quelques exemples pratiques 

Les echantillons de code suivants permettront de mieux cerner cette difference fon- 
damentale de structure. 

I <p>Paragraphe l</pxp>Paragraphe 2</p> 

Ces deux paragraphes occuperont chacun une ligne distincte, car la balise <p> est de 
type bloc. 

<strong>Toto</strong> et <em>moi</em> 



Figure 2-2 

Affichage de deux 
elements de type bloc 



Paragraphe 1 
Paragraphe 2 



Ce texte s'affichera a la suite (sans retour a la ligne) car les balises qui le definissent 
sont en ligne. 

I <pxstrong>Toto</strong> et <em>moi</emx/p> 



Figure 2-3 

Affichage de deux 
elements en ligne 



Toto et moi 



Ce code ne prendra (probablement) qu'une ligne a l'ecran car il ne comporte qu'une 
seule balise de type bloc et son contenu reste au fil du texte. 

<hlxstrong>Toto</strong> et <em>moi</emx/hl> 

<p>Je connais <strong>Toto</strong> depuis mon enfance.</p> 
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Figure 2-4 

Affichage mixte d'un bloc 
avec elements en ligne 



Toto et moi 



Cette portion du document apparaitra en deux parties : la premiere comprendra le 
titre represente par l'element bloc <hl> (contenant a son tour deux elements en 
ligne). Le bloc de paragraphe <p> constituera la seconde. II contient lui aussi un ele- 
ment en ligne. 



Figure 2-5 

Affichage mixte d'elements 
bloc et en ligne 



Toto et moi 



Je connais Toto depuis mon enfance 



Contenus autorises selon les types de balises 

Ces deux families de balises different egalement par les contenus qu'elles acceptent, 
en dehors du texte a proprement parler : 

• Un element bloc peut contenir un (ou plusieurs) elements bloc et/ou en ligne, a 
l'exception des elements de paragraphe <p> et des titres <hl>, <h2>..., limites aux 
contenus en ligne. 

• Un element en ligne ne peut renfermer que d'autres elements en ligne. 

II existe aussi deux sortes d'elements en ligne : « remplaces » et « non remplaces ». 

• Seuls les elements remplaces acceptent des attributs de dimensions (height, 
width). II s'agit des elements <img>, <input>, <textarea>, <select> et <object>. 

• Les autres n'ont pas de dimension a proprement parler, et hoccupent que la place 
necessaire a leur contenu. C'estle cas des elements <strong>, <em>, <a>, <span>, etc. 

Une mise en page se fera done preferentiellement a l'aide de balises de type bloc. La 
plus indiquee pour cet usage est <div> (« division ») : e'est une balise generique ser- 
vant de conteneur neutre. 

Void une illustration de notre propos : 

I <divxp>Paragraphe l</pxp>Paragraphe 2</px/div> 

La balise de bloc <div> englobe les deux blocs de paragraphe, ce qui est autorise. En 
revanche, ce qui suit est invalide : 

<spanxp>Paragraphe l</pxp>Paragraphe 2</px/span> 
En effet, la balise en ligne <span> ne peut contenir des blocs tel le paragraphe (<p>). 
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Les elements en ligne 

Le contenu des elements en ligne est affiche au fil du texte. Par exemple : des por- 
tions de phrases mises en exergue dans un paragraphe, des liens hypertexte, etc. On 
les appelle encore « elements internes » car ils visent a donner du sens a des portions 
du document tout en restant au fil du texte, c'est-a-dire sans creer de nouveaux blocs. 

C'est par exemple le cas des elements de renforcement (representes en gras par les 
navigateurs graphiques), et d'emphase (italique). 

Ces elements, concus pour demeurer au sein du texte afin de l'enrichir et de lui 
apporter du sens, ne sont pas vraiment prevus pour un positionnement precis dans le 
document (meme si cela est possible). A 1' exception des elements remplaces, deja 
mentionnes, leurs dimensions seront determinees par leur contexte. 

Par defaut, et contrairement aux elements de type bloc, les elements en ligne ont des 
marges internes et externes d'epaisseur nulle, done inexistantes. 

Les elements de type bloc 

II s'agit de ceux dont le rendu visuel forme un bloc. C'est par exemple le cas des para- 
graphes. 

Cette structure leur permet de prevoir des dimensions (hauteur, largeur, profondeur), 
de contenir d'autres elements dimensionnes, et de posseder des marges internes 
(padding). Leur propriete la plus importante est la possibilite de les placer (ou posi- 
tionner) en les sortant du flux du document, contribuant ainsi a sa mise en page. 

Ces caracteristiques leur sont pour la plupart reservees. Ainsi, une balise en ligne 
comme <em> ne pourra posseder de dimensions propres, celles-ci dependant du con- 
tenu (texte ou image) de son element. 

II est facile de passer d'une structure bloc a une structure en ligne (et inversement) 
grace a la propriete CSS di spl ay. Nous verrons egalement comment positionner les 
differents elements selon leur type. 



Perturbant Marges par defaut 

A I'exception de la balise neutre <di v>, tous les elements de type bloc possedent par defaut des mar- 
ges internes (padding) et externes (margin) non nulles. Vous constaterez toute leur importance en 
observant que les differents navigateurs leur donnent des valeurs differentes. C'est pourquoi il faut par- 
fois les annuler ou les expliciter pour eviter de grosses differences de rendu visuel. 
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Les principales balises HTML standards 

Depuis la naissance du HTML, le W3C a cree de nombreuses balises. 

Au fur et a mesure des versions successives de HTML (et des confiits d'interet entre 
les navigateurs), beaucoup d'elements ont ete declares « deprecies » (traduction fre- 
quente mais incorrecte du faux-ami deprecated, qui indique plutot une disapproba- 
tion), ou obsoletes. 

HTML 4 (XHTML 1) compte actuellement une trentaine de balises de type bloc et 
autant de balises en ligne. 

Nous n'aborderons ici que les balises principales et les plus utiles. Compte tenu des 
objectifs de cet ouvrage, nous passerons sous silence les balises obsoletes, creees ori- 
ginellement pour modifier la mise en forme visuelle du document. 

Les principales balises en ligne 

Parmi toutes les balises au fil du texte, six sont a connaitre. Elles sont regroupees 
dans le tableau 2-1. Les balises incontournables du type bloc sont presentees au 
tableau 2-2. 

Tableau 2-1 Les principales balises en ligne 



Balise Commentaires Exemple d'utilisation 


<a> 


Designe un lien hypertexte. 
Elle s'accompagne de I'attribut href, qui ren- 
ferme la cible du lien (son contenu representant 
le texte a cliquer pour activer le lien). 


<a href='page2 .htm'>a"Nez en 
page 2</a> 


<em> 


Met en emphase une portion de texte. 
Quand la police utilisee est droite, la plupart 
des navigateurs graphiques la traduisent 
comme une mise en italique. 


<p>Voici un texte 
<em>i mpo rtant</em> . </p> 


<img> 


Inclut une image dans le document. 
Cette balise s'accompagne des attributs alt 
(texte alternatif pour malvoyants ou naviga- 
teurs en mode texte) et src (qui indique le 
chemin vers I'image). 

Le format de fichier de I'image, en theorie libre, 
est souvent limite a ce que comprennent les 
navigateurs - c'est-a-dire GIF, JPEG, et PNG. 
Remarquons que <img> est une balise sans 
contenu (« auto-fermante », ou encore « balise 
vide »). Ceci se traduit par son /> final. 


<img a"lt=' pen's son' 
src='poi sson.png' /> 
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Tableau 2-1 Les principales balises en ligne (suite) 



Balise 


Commentaires 


Exemple d'utilisation 


<q> 


Balise utilisee pour les citations courtes, en 


<p>Comme le dit toujours ma 




ligne. On utilisera la balise bloc 


grand-mere : <q>il ne faut 




<blockquote> pour des citations plus lon- 


<em>pas</em> vendre la peau de 




gues. 


1'ours avant de 1' avoir tue 

</q>.</p> 


<span> 


Conteneur en ligne generique, depourvu d'un 


<span class="auteur">un texte 




sens precis mais qui peut servir a regrouper 


</span> 




d'autres elements au fil du texte. 






Son equivalent est I'element <di v>. 




<strong> 


Indique un renforcement, generalement repre- 


<p>Comme le dit toujours ma 




sentee en gras dans les navigateurs graphiques. 


grand-mere : <q>il ne faut 
<strong>surtout pas</strong> 
vendre la peau de 1'ours avant 
de 1' avoir tue</q>.</p> 



Tableau 2-2 Les principales balises de type bloc 



Balise 


Commentaires 


Exemple d'utilisation 


<blockquote> 


Introduit des citations longues. 
Par defaut, certains navigateurs prevoient une 
marge gauche aux blocs de citation, qu'on 
pourra bien sur modifier en CSS. 


<p>Comme le dit toujours ma 
grand-mere :</p> 
<blockquotexp>il ne faut 
<strong>pas</strong> vendre la 
peau de 1'ours avant de 1' avoir 
tue</p> 

<p>non non, il ne faut pas ! 
</px/blockquote> 


<div> 


Conteneur generique de type bloc. 

Cette balise n'apporte pas de sens specifique, a 

I'instar de son equivalent en ligne <span>. 

Elle sert a regrouper d'autres balises bloc ou en 

ligne. 


<divxp>Voici un texte 
<em>important</em>.</p> 
<p>Voici un autre texte 
</p>.</div> 


<dl> 


Liste de definitions, utile pour structurer les ele- 
ments associant des definitions ou contenus a 
des termes ou a des titres. 
Ces listes distinguent les titres (<dt>) des ele- 
ments de definition (<dd>). 


<dl> 

<dt>Titre de 1 'element</dt> 

<dd>description de I'element 

</dd> 

<dd>Suite de la description 

</dd> 

</dl> 



Standards HTML et XHTML : quelle difference ? 

Premiere partie 



Tableau 2-2 Les principales balises de type bloc (suite) 







Exemple d'utilisation 


<form> 


Balise delimitant un formulaire interactif. 


<form action="pagesuivante . php" 




Elle contient generalement des elements 
d'interface (champs de texte, boutons de vali- 
dation, cases a cocher, etc.) 


method="get"> 

<P> 

<input type="text" 




Cet element doit renfermer immediatement 
d'autres elements de type bloc. 


name="recherche" /> 
<input type="submit" 

value="ok" /> 
</p> 
</form> 


<hl>, <h2>, 
... <h6> 


HTML prevoit six niveaux de titres, hierarchi- 
quement places sous le titre principal (<hl>). 
Rappel : ces elements constituent une excep- 
tion a la regie des blocs ; ils ne peuvent pas 
contenir d'autres blocs. 


<hl>Un titre principal</hl> 


<ol>, <ul> 


Ces deux balises designent des listes ordonnees 


<ul> 




(<ol>) ou a puces simples (<ul>). 


<"li>premier objet de la liste 




Elles comportent exclusivement les elements 
d'objetde liste (<li>). 


</li> 

<li>second objet de la liste 

</li> 

</ul> 


<P> 


Balise designant un paragraphe de texte. Cet 
element constitue une exception a la regie des 
blocs car il ne peut en contenir d'autres. 


<p>Un paragraphe de texte</p> 


<table> 


Tableau contenant des donnees. 


<table> 




Les cellules du tableau dont d'abord rassem- 
blees sous forme de rangees ou lignes (<tr>). 


<tr> 

<td>cellule</td> 
<td>autre cellule</td> 

</tr> 
</table> 



Ces tableaux ne reprennent qu'une partie des elements proposes par le HTML. Bien 
d'autres vous permettront de structurer vos pages (<dfn>, <address>, <acronym>, 
<abbr>, <kbd>, <samp>, etc.). Le lecteur soucieux de creer des structures de docu- 
ments claires et logiques se penchera de plus pres sur cette longue liste. 

La plupart des logiciels generant du code automatique boudent les balises les plus 
appropriees au profit d'un petit echantillon de balises generiques depourvues de sens 
reel. Cette accumulation de <div> et de <span> conduit a une pauvrete semantique 
prejudiciable au document. 
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Separer le contenu de la mise en forme 

La bonne connaissance de la signification et surtout de la semantique de chacun des 
elements aide a concevoir des documents structures, faciles a interpreter par tous les 
agents ou clients existants, meme non graphiques. 

La representation et mise en forme de ces elements ne passe qu'apres leur organisation 
logique. Un document web est avant tout une source d'informations qui doit rester 
accessible a tous. II est done necessaire de s'appliquer a produire une structure claire et 
porteuse de sens avant de s'attacher a 1' aspect purement graphique du document. 

La structuration logique des donnees 

XHTML etant devenu un systeme de balisage semantique du contenu, les structura- 
tions qu'il opere desormais sont purement logiques. 

Comme nous l'avons vu, les balises seront choisies en vertu de leur sens, non en fonc- 
tion de leur representation par defaut sur tel ou tel navigateur ni l'aspect qu'on veut 
leur donner. 

XHTML ne se preoccupe ainsi plus que de la structure logique du document, la mise 
en forme (caracteres, couleurs, marges, etc.) relevant des feuilles de styles. Ce manuel 
vise principalement a vous convaincre des avantages de cette nouvelle approche et a 
mettre celle-ci en ceuvre correctement. C'est la nouvelle ligne de conduite du 
HTML : separer le contenu de la mise en forme. 

En XHTML, il est recommande d'abandonner les balises de mise en forme gra- 
phique comme <i> (designant l'italique) au profit de balises de structuration plus 
logique comme <em> (mise en emphase). De meme, i'element de renforcement 
<strong> remplacera desormais la balise de gras <b>. 

Adoptez vous aussi ces nouvelles habitudes, et laissez de cote les balises concues pour 
la mise en forme visuelle du document. 

Le principe des feuilles de styles 

Dans cet ouvrage, notre demarche pourra se resumer a l'abandon de toute balise de 
mise en forme au profit des seules balises porteuses de sens (et des conteneurs gene- 
riques <span> et <di v>). II est temps de jeter aux orties les <font>, <center> et autres 
balises de mise en page ! 

La mise en forme des documents se fera des lors par des feuilles de styles detaillant la 
representation des balises et attributs retenus. 
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Par exemple : 
<p style="font-family:verdana,arial ; font-weight: bold; color: red;"> 

qu'on peut encore ameliorer en ecrivant <p class="erreur"> apres avoir defini les 
proprietes de la classe erreur. 



Attention Ne pas confondre <div> et « caiques » 

Les balises neutres <di v> servant de conteneurs de blocs, elles designent une boite rectangulaire invisi- 
ble. Generalement, cet element est assimile au concept de « caique », surtout sur les editeurs HTML 
comme Dreamweaver ou Golive. Un « caique » est alors un <di v> positionne avec I'une des proprietes 
position: absolute, position : relative, ou position: fixed. 
Rien n'oblige pourtant a imposer cette propriete de placement : on peut souvent s'en passer en placant 
les di v les uns par rapport aux autres grace a la propriete margi n. Le chapitre 7 sera entierement con- 
sacre au positionnement des elements via CSS. 
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Mise en situation 



Debutons un petit projet qui nous servira de fil conducteurtout au long des chapi- 
tres suivants. 

II s'agit de concevoir un site web de A a Z, de sa structure a sa mise en page com- 
plete, en passant par le placement des differents elements et par quelques 
reflexions sur ses menus et la maniere d'y naviguer. 

Endossez I'identite d'un Alsacien amoureux (a juste titre) de sa region. Votre 
projet consiste a concevoir un site web de tourisme en Alsace comprenant des 
textes de presentation, des liens et illustrations, ainsi que des photographies de 
cette belle region. 

Exercice numero 1 

Votre page d'accueil comprend un titre principal (« Bienvenue en Alsace »), puis 
deux titres secondaires (« Une belle region francaise » et « Un patrimoine 
considerable »), associes chacun a un paragraphe de texte explicatif. Pour finir, 
un pied de page contiendra une presentation de votre societe et un lien vers 
diverses precisions juridiques. 

Comment structurer cette page d'accueil en HTML ? 

Les balises de titres sont les balises de bloc <hl> a <h6>. Le titre principal sera done 
defini a I'aide de la balise <hl> et les titres secondaires avec <h2>. Quant aux para- 
graphes, ils seront delimites par la balise de bloc <p>. 

Pour le pied de page, on preferera encore une balise de paragraphe a la balise 

generique <div>. 

Voici un exemple de code final pour cette page d'accueil : 

<hl>Bienvenue en Alsace</hl> 

<h2>Une belle region f rangaise</h2> 

<p> [Paragraphe associe au sous-titre de niveau 2.]</p> 

<h2>Un patrimoine considerable</h2> 

<p> [Paragraphe associe a cet autre sous-titre de niveau 2.]</p> 

<p>Pied de page et <a href="...">Mentions legal es</ax/p> 

Rappelons le cas particulier des balises de titres et de paragraphes : contrairement 
aux autres elements de type bloc, elles ne peuvent pas renfermer des blocs. II n'est 
done pas possible d'imbriquer un paragraphe dans une balise de titre. 
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Exercice numero 2 

Le titre principal « Bienvenue en Alsace » doit etre un lien hypertexte menant a 
une page contenant diverses photographies : photos.htm. 

Vous associerez a ce lien une infobulle declenchee par le passage du pointeur de 
la souris et expliquant que ce lien mene a vos photos de presentation. 

Quel choix allez-vous faire parmi ces trois propositions ? 

1 <a href="photos.htm" title="photos d'Alsace"> 
<hl>Bienvenue en Alsace</hlx/a> 

2 <hlxa href="photos .htm" alt="photos d'Alsace"> 
Bienvenue en Alsace</ax/hl> 

3 <hlxa href="photos .htm" title="photos d'Alsace"> 
Bienvenue en Alsace</ax/hl> 

Prenez garde a la structure des balises. La balise de lien <a>, etant un element de 
type en ligne, ne peut pas contenir d'elements de type bloc comme <hl>. Ceci 
exclut done la premiere proposition. 

II s'agit done de choisir entre les attributs alt et title. 

Le premier signifie « texte alternatif ». On I'associe aux images pour preciser un 
texte qui sera par exemple affiche sur les navigateurs non graphiques, comme les 
plages en braille utilisees par les aveugles. Pour information, I'attribut alt est 
propre a I'element image img. 

L'attribut title correspond quant a lui a I'infobulle, e'est-a-dire au comportement 
recherche ici. C'est done la derniere solution qui est la bonne. 

La confusion entre alt et title estfrequente car Internet Explorer declencheaussi 
une infobulle sur I'attribut alt, comportement non prevu par la norme. 

Exercice numero 3 

L'un des deux paragraphes de texte contiendra une image cliquable, servant de 
lien vers la page de photographies regionales. 

Comment proceder ? 

L'image <img> devant se comporter comme un lien, il suffit de I'inclure dans une 
balise de lien (<a>). Le contenu de cette derniere (e'est-a-dire l'image) deviendra 
alors un lien hypertexte. 

L'exercice precedent rappelait que la balise en ligne <a> ne pouvait pas contenir 
d'elements de type bloc tels que des titres. II est en revanche parfaitement auto- 
rise d'y inclure une image, puisque la balise <img> est de type inline. 
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On ecrira done un code proche de : 

<p>[Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos .htm" title=""lien vers des photos d'Alsace"> 

<img src="image.png" a"lt="photographie" /></a> 

</p> 

Exercice numero 4 

Vous avez decide d'inclure un menu vertical de navigation comprenant les liens 
suivants : 

- Retour a I'accueil ; 

- Presentation de la region ; 

- Historique de I'Alsace ; 

- Gastronomie locale; 

- Hotels et gftes ; 

- Photographies. 

Quelle structure parmi les trois suivantes vous paraTt-elle la plus appropriee ? 
Pourquoi ? 

1 Inclure chaque element (<a>) du menu au sein d'un element de bloc 
comme les balises <div> ou <p>, de sorte que ces liens s'affichent les uns 
sous les autres. 

2 Separer ces liens par des balises de retour a la ligne <br />. 

3 Utiliser les elements de liste (<u"l> et <1i>) pour structurer ce menu et ses 
liens. 

Exemple: 

<u"l> 

<lixa href="...">Retour a 1 'accuei"l</a></"li> 

<lixa href="...">Presentation de la region</ax/li> 

</u"l> 



Le succes d'un site web dependant directement de son ergonomie et de son intui- 
tivite, I'elaboration des methodes de navigation permettant d'y circuler fera 
I'objet d'une reflexion poussee et d'une grande attention. 

Ces trois propositions auront des aspects sensiblement equivalents : chacune affi- 
chera une liste de liens places les uns sous les autres. 

Rappelons que I'aspect visuel present ne doit pas compter (il sera toujours temps 
de le corriger dans la feuille de styles, et les chapitres suivants vous feront la 
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demonstration de la grande puissance de cette technique). II s'agit uniquement de 
construire le menu le plus logiquement possible. Quelle est done la structure la 
plus semantique parmi les trois proposees ? 

Separer les liens par une balise de retour a la ligne <br /> est une erreur : il s'agit 
justement du piege a eviter, puisque I'on ne se preoccupe alors que du rendu visuel 
de la navigation. Placer chacun des liens dans une balise de type bloc est 
interessant : cela permet de les separer d'une maniere structurelle et non graphique. 
Cependant, le choix des balises <div> ou <p> est discutable. En effet, la premiere est 
une balise generique n'apportant aucun sens au menu de navigation. Quant a la 
seconde, qui designe un paragraphe de texte, elle serait utilisee ici a contre-emploi. 

Le plus approprie est ici d'opter pour les balises de listes non ordonnees. II s'agit 
bel et bien d'une liste (elements de navigation) ; ce choix convient done tout a fait 
et il est porteur de sens. Nous verrons plus loin, dans le chapitre consacre a la con- 
ception de menus, comment supprimer les puces par defaut et donner aux listes 
I'habillage graphique souhaite. 

Cette premiere mise en situation debouche ainsi sur un code HTML proche de : 



..">Retour a 1 'accuei"l</a></"li> 
..'^Presentation de la region</ax/li> 
..">Historique de 1 'Alsace</ax/li> 
..">Cast ronomi e 1 oca! e</ax/l i > 

">H6tels et gites</ax/li> 

">Photographies</ax/l i> 



<body> 

<ul> 

<lixa href="...' 

<lixa href="...' 

<lixa href="...' 

<lixa href="...' 

<lixa href="...' 

<lixa href="...' 

</ul> 

<hlxa href="photos. htm" title="photos d'Alsace">Bienvenue en Alsace 

</ax/hl> 

<h2>Une belle region frangaise</h2> 

<p> [Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos .htm" title="lien vers des photos d'Alsace"> 

<img src="image.png" alt="photographie" /x/ax/p> 

<h2>Un patrimoine considerable</h2> 

<p> [Paragraphe associe a cet autre sous-titre de niveau 2.]</p> 

<p>Pied de page et <a href=" . . . ">Mentions legal es</ax/p> 

</body> 

Le menu est volontairement place au debut du code HTML. Ceci s'explique par des 
raisons structurelles : la navigation represente la boussole d'une page web, indi- 
quant la position actuelle et proposant d'autres destinations. 

C'est en general le premier point de repere dans la page. Placer ainsi la navigation 
en tete la situera en bonne position dans les navigateurs graphiques ainsi que 
dans les navigateurs en mode texte ou en braille. Cela facilitera la manipulation 
du site par les utilisateurs de ces programmes. 



Deuxieme partie 



Les feu i lies 
de styles CSS 



Creees pour prendre en charge tous les aspects graphiques et les rendus sur les 
differents medias (ecran, mais aussi imprimante, synthese vocale, assistant per- 
sonnel, etc.), les feuilles de styles ajoutent la couche graphique au document web 
et a sa structure. Cette partie aborde leur syntaxe et utilisation pratique allant de 
la typographic aux differentes methodes de positionnement. 
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Introduction aux 
feu i lies de styles CSS 



CSS est un langage specifique au Web, frequemment employe comme complement 
du langage HTML, et dont la fonction est de former des feuilles de styles chargees 
de la mise en forme des documents web. II gere l'esthetique (couleurs, typographic) 
et diverses fonctionnalites. 

Son champ d'action ne se limite pas au media screen (ecran), mais s'etend egalement 
aux medias print (imprimante), projection (presentations projetees), braille 
(tablettes a l'usage des aveugles), embossed (impression en braille), aural /speech 
(proprietes auditives), handheld (assistants numeriques) et tv (Web-TV) 



Presentation 



La version actuelle de CSS (CSS 2) complete la version precedente, CSS 1, avec 
laquelle elle est entierement compatible. 

Les feuilles de styles sont apparues dans les annees 1990, periode pendant laquelle 
les deux principaux navigateurs, Netscape Navigator et Microsoft Internet Explorer, 
creaient leurs extensions mutuellement incompatibles et truffees de balises proprie- 
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taires. Chacun refusant les elements de l'autre, il fallait concevoir ses pages en detec- 
tant le navigateur utilise et en adaptant le code au besoin. CSS s'est peu a peu impose 
comme standard universel palliant ces problemes de compatibilite. 

Apres son acceptation par le W3C qui l'associa au langage HTML, la version 1.0 
des feuilles de styles CSS fit son entree dans les differents navigateurs (il s'agissait 
alors de Netscape 4 et d'Internet Explorer 4, qui incorporerent peu a peu ces nou- 
velles proprietes). CSS version 2.0, apparu plus tard, offrait de nouvelles possibilites 
bien plus vastes : positionnements divers et precis, fonctionnalites d'accessibilite 
(notamment pour les lecteur vocaux), etc. 

A present, la quasi-totalite des navigateurs proposent tout CSS 1 et presque tout 
CSS 2. Mais les standards continuent leur evolution, et CSS 3 attend desormais son 
adoubement officiel par le W3C (recommandation). II prendra alors la suite des ver- 
sions precedentes sur les navigateurs les plus reactifs (comme Mozilla et Opera). 

Rappelons que les normes du Web incitent desormais webmasters et concepteurs de 
sites web a separer clairement leurs contenus (HTML) de la mise en forme (CSS). 
Cette distinction a d'autres interets que la simple satisfaction de theoriciens 
chagrins : la conception des pages web s'en trouve vraiment facilitee. 

Cette dissociation des fonctions evite encore de penaliser les anciens navigateurs (les 
documents y demeurant lisibles), les navigateurs en mode texte (ciblant les aveugles 
ou les utilisateurs en mode texte), et les programmes utilisant d'autres medias (assis- 
tants personnels, WAP, ordinateurs avec synthetiseur vocal, navigateurs braille, etc.). 

Pourtant, nous n'avons pas encore aborde leur interet principal. Quel webmaster n'a 
jamais du modifier tout son site, page apres page, pour repeter fastidieusement la 
meme manipulation elementaire (par exemple, changer la couleur des titres) ? 

CSS simplifie cette operation : avec cette nouvelle technique, une seule feuille de 
styles, stockee dans un fichier, assure la gestion graphique de l'integralite d'un site, 
qu'il compte trois pages ou plusieurs centaines. Toute intervention dans ce fichier 
sera immediatement repercutee partout. 

En outre, cette feuille CSS etant conservee dans la memoire cache de l'ordinateur du 
navigateur apres la premiere connexion, toutes les pages du site s'afficheront plus rapi- 
dement que si les indications de presentation etaient repetees sur chacune d'entre elles. 

Cette premiere mise en bouche vous a sans doute motive pour aller plus loin. Met- 
tons-nous done en situation et appliquons nos premiers styles CSS. 
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La syntaxe de base des CSS 



Quelle que soit la version de CSS retenue, une feuille de styles CSS prend toujours la 
forme d'une liste de declarations, ecrites dans un langage specifique et distinct de 
HTML. Ainsi, pour appliquer la couleur bleue aux titres principaux du document, 
on ecrira : 

hi {color: blue} 

Rien de bien complique, n'est-ce pas ? 

Les accolades sont precedees d'un selecteur, qui s' applique ici a la balise <hl>. Cette 
regie colorera done toutes les balises <hl> contenues dans la page. 

Le bloc de declaration, situe dans les accolades, contient une ou plusieurs declara- 
tions, ces dernieres etant constitutes de couples « propriete - valeurs ». Cet exemple 
ne contient qu'une seule declaration, associant la valeur blue a la propriete color. 
C'est toujours le caractere deux points ( : ) qui separe une propriete de sa valeur - rap- 
pelons qu'en HTML les attributs sont qualifies a l'aide d'un signe d'egalite (par 
exemple : color="blue"). 

Pour completer ce bloc par d'autres declarations, il suffit de les ajouter a la suite, sans 
oublier le separateur d'instruction : le point- virgule ( ; ). Souvent oublie, ce dernier est 
pourtant necessaire. On assurera la lisibilite du code en reservant une ligne a chaque 
declaration. 

Au final, l'ensemble forme par le selecteur et le bloc de declaration sera nomme 
« regie ». Reprenons la regie ci-dessus en l'enrichissant d'une declaration alignant les 
titres au centre : 

hi { 

color: blue; 

text-align: center; 

} 

Notez la presence du point-virgule, facultatif apres la derniere declaration. Pour ne 
pas l'oublier, on le precise systematiquement. Ceci facilite egalement les copies ou 
deplacements de lignes dans la feuille de styles. 

Les feuilles de styles peuvent s'ecrire indifferemment en majuscules ou en minuscules 
(a l'exception de leurs portions non regies par CSS, comme les valeurs des attributs 
HTML id et class). Pour eviter toute confusion, on conviendra cependant de tout 
ecrire en minuscules. Signalons enfin que les selecteurs ne peuvent commencer ni par 
un tiret, ni par un chiffre. 
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Appliquer les styles CSS 

Comment appliquer ce style CSS au document HTML qui en depend ? II existe 
pour cela trois methodes, mais nous utiliserons de preference celle de la feuille de 
styles, qui presente de nombreux avantages. 

Inserer des styles dans l'en-tete du document 

On peut d'abord placer des styles CSS dans l'en-tete HTML (contenu de Felement 
<head>). Place entre les balises <style> et </style>, ce code s'appliquera a tout le 
document : 

<style type="text/css"> 
hi {color: blue;} 
</style> 

Cette technique, qui separe correctement contenu et mise en forme, portera automa- 
tiquement sur tous les titres <hl> du document - contrairement a la methode 
d'incrustation, dont Faction est confinee au niveau local. Malheureusement, la portee 
de ce style se limite au document HTML du fichier. 

Dans Fideal, le design general du site s'appliquera automatiquement, sans devoir etre 
explicite dans chaque document HTML. Pour aboutir a cet effet, nous placerons les 
regies CSS dans un fichier distinct. 

Lier les styles a partir d'une feuille separee 

II s'agit de stocker les ressources dans des fichiers distincts : documents HTML et 
feuilles de styles CSS. Ces dernieres renfermeront toutes les regies necessaires a la 
mise en page et au design des fichiers HTML. II suffira alors de modifier le fichier 
CSS separe pour changer Failure de toutes les pages HTML du site. 
Ce fichier CSS, appele feuille de styles, portera l'extension . ess et ne contiendra que 
des regies CSS (aucun code HTML n'y sera autorise, pas meme la balise <style> 
vue dans la methode precedente). Le langage CSS, fait pour ecrire des regies, ne peut 
contenir d'autres langages. II convient ensuite de relier ce fichier aux contenus sur 
lesquels il est cense porter. 

Liaison par la balise <link> 

Pour lier cette feuille de styles a toutes les pages HTML du site, il est d'usage de 
placer une balise <link> dans l'en-tete (<head>) de ces dernieres. Colorons les titres 
<hl> en bleu a l'aide d'une feuille de styles separee. Le document (X)HTML aura 
Failure suivante : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xm"lns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 
<head> 

<title>Titre evocateur pour le document</title> 
<meta http-equiv="Content-Type" 

content="text/html ; charset=iso-8859-15" /> 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 

<hl>Titre principal de la page</hl> 
</body> 
</html> 

La feuille de styles CSS styles . ess aura alors pour contenu : 

hi { 

color: blue; 

} 

C'est l'occasion de prendre connaissance de la structure d'une page ecrite en doctype 
XHTML strict (la balise <html> contenant la reference a l'espace de noms et au lan- 
gage utilise). 

Utiliser la regie ©import 

Cette regie permet elle aussi de lier une feuille de styles externe a son document 
HTML. Ce n'est pas une balise HTML, mais une regie CSS 2. II est done neces- 
saire de la declarer dans i'element <style> de l'en-tete du document : 

<style type="text/css"> 

©import url (styles .ess) ; 
</style> 

Les feuilles de styles, on le voit, ne presentent rien de complexe ni dans leur structure 
ni dans leur utilisation. Ce ne sont jamais que des regies comportant des declarations. 
Connaitre les differentes proprietes CSS permet de gerer rapidement toutes les pages 
d'un site web. Si vous souhaitez par exemple centrer les titres principaux au milieu de 
l'ecran, precisez simplement la declaration suivante dans le style deja vu plus haut : 

hi { 

color: blue; 

text-align: center; 

} 
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Methode link ou ©import ? 

Quelle methode est preferable pour relier la feuille de styles au document ? Cette 
question frequente merite un developpement. 

<link> est une balise HTML qui n'est pas uniquement devolue aux feuilles de styles. 
Quand elle designe une feuille de styles CSS, elle s'accompagne des proprietes et 
valeurs suivantes : reWstylesheet" , type="text/css" et media=[type de 
media souhaite], voire title dans le cas de feuilles de styles persistantes et alter- 
natives. 

Par exemple : 

<"link rel="stylesheet" href="/styles/habi"Nage.css" 
type="text/css" media="screen" /> 

La regie ©import, propriete CSS 2, sera suivie de I'URL d'un fichier contenant les sty- 
les a appliquer en plus de la feuille de styles en cours. On pourra preciser une liste de 
medias. Par exemple : 

<style type="text/css"> 

©import url (/styles/habillage. ess) ; 
</style> 

ou : 

<style type="text/css"> 

©import url (impression. ess) print; 
</style> 

Cette propriete permet en outre d'inclure des feuilles de styles dans d'autres, ce qui 
permet de creer des feuilles de styles dynamiques sans devoir recopier plusieurs fois 
le meme code. 

Le resultat est en pratique identique (ce qu'on verifie par des tests sur plusieurs sites), 
a une petite subtilite pres. En effet, cette regie CSS 2 n'est pas reconnue par les tres 
anciens navigateurs, pas aux normes CSS - e'est par exemple le cas de Netscape 4. 
Appliquer une feuille de styles par appel a ©import la fera done appliquer partout 
sauf sur ces anciens navigateurs, ce qui permettra a leurs utilisateurs de consulter le 
site web concerne sans trop de problemes. Un site depourvu de feuille de styles est 
toujours plus lisible qu'un site dont les styles sont mal interpretes. 

En resume : avec ©import un Netscape 4 recevra une page brute, sans style, plutot 
qu'une horreur probablement illisible. C'est done une technique recommandee pour 
I'interoperabilite et la compatibilite avec les anciens navigateurs. 
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Une feuille de styles peut evidemment comporter autant de regies que souhaite. Pour 
representor tous les liens hypertextes (<a>) en police grasse, on ecrira par exemple : 

a { 

font-weight: bold; 

} 

La feuille globale sera alors : 

hi { 

color: blue; 

text-align: center; 

} 

a { 

font-weight: bold; 

} 

On procedera de meme pour ajouter toute autre regie necessaire a la bonne mise en 
forme du document. 

Incorporer les styles dans la balise 

Cette derniere methode consiste a ecrire directement les styles CSS dans le code 
HTML, grace a la propriete HTML style. Voici un exemple : 

<hl style="color: blue;">Titre de la page</hl> 

On reservera cette technique aux essais ponctuels temporaires et aux cas de force 
majeure. Elle cumule en effet tous les inconvenients normalement evites par les 
CSS: 

• Ce style ne s'appliquera qua cette balise precise. II faudrait repeter ce code sur 
chacune des balises <hl> du document pour qu'elles soient toutes affectees. 

• Ce style, directement inscrit dans la partie HTML du document, mele a nouveau 
le contenu a sa mise en forme. On ne factorise done plus rien, et le recours syste- 
matique a cette methode rendrait une modification globale du site web extreme- 
ment fastidieuse. 

On observe des instructions CSS introduites directement, sans selecteur. Cela 
signifie que le style est deja lie a un element HTML specifie. 
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Les selecteurs de styles 

L'exemple donne ci-dessus utilise comme selecteurs les balises <hl> et <a>. Ses regies 
afFecteront done toutes ces balises dans les pages HTML concernees. Cet effet nest pas 
toujours desirable : on souhaite parfois n'intervenir que sur certaines balises d'un type 
donne (par exemple, en colorant en rouge certains liens hypertextes mais pas tous). 

Pour cela, le langage CSS accepte differentes formes de selecteurs : 

• les selecteurs de balises (utilises jusqu'ici) ; 

• les selecteurs de classes (une classe est un nom donne a un ensemble d'elements 
HTML a distinguer) ; 

• les selecteurs d'identifiants (un identifiant ou i d est le nom attribue a un element 
unique dans le document HTML) ; 

• les pseudo-classes et les pseudo-elements (variantes pour certaines fonctionnali- 
tes, par exemple les liens). 

Les balises 

Toute balise HTML peut intervenir dans un selecteur. Ainsi, on pourra supprimer 
tous les interlignes entre paragraphes en attribuant a la balise <p> des marges haute et 
basse nulles : 

P { 

margin-top: 0; 
margin-bottom: 0; 
} 

Les classes 

Une classe est un nom que Ton choisit librement (en se limitant aux caracteres alphanu- 
meriques classiques) et dont on baptise les elements concernes. Un selecteur de classe 
reprend son nom en le prefrxant d'un point (par exemple : . ma_cl asse, . toto, etc.). 

Pour attribuer un comportement different a certains elements, il suffit de leur appli- 
quer une classe. On affichera en vert les liens hypertextes du document a l'exception 
de certains liens particuliers que Ton souhaite voir apparaitre en rouge en reprenant la 
technique suivante. 

Une premiere regie precise le comportement par defaut a adopter pour toutes les 
balises <a> : 

a { 

color: green; 

} 
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Appelons . sommai re la classe des liens specifiques. Ceci permet d'ecrire une regie qui 
leur est propre : 

. sommai re { 
color: red; 

} 

Dans le document, les liens seront alors identifies comme suit : 
<a href="...">"lien normal </a> 

apparaitra en vert, comme defini par la premiere regie. 
<a href="..." class="sommai re">"lien rouge</a> 

apparaitra en rouge, ainsi que tous les liens de la classe sommai re, par application de 
la regie specifique, qui prend le pas sur le selecteur general. 

Cette classe permettra d'obtenir autant de liens rouges que souhaite. 



Bonne pratique Choisir de bons noms de classes 

D'une maniere generale, on evitera d'opter pour des noms de classes se rapportant a la presentation : 
c'est une mauvaise idee. 

Supposons par exemple que la classe rouge designe de nombreux liens d'un site web. Si le webmaster 
change d'avis et decide de presenter ces liens en vert, il obtiendra une classe « rouge » correspondant a 
une coloration en vert ! C'est si perturbant qu'il n'aura de cesse que de modifier tous ses documents HTML 
pour mettre a jour le nom de toutes les classes. . . ou comment reduire a neant les avantages de CSS. 
C'est pourquoi on preferera des noms de classes en rapport avec la structure des elements qu'ils desi- 
gnent (par exemple : sommai re, important, menu_haut, en_tete, recherche, etc.) 



Rien ne vous contraint a reserver cette classe a 1' element <a> : elle peut s'appliquer a 
n'importe quel autre element. Ainsi, un paragraphe defini comme suit : 

I <p class="sommai re">un paragraphe de la meme classe</p> 

sera lui aussi affiche en rouge. 

Le nombre de classes utilisees est libre, ainsi que le nombre d'elements auxquels elles 
s'appliquent. Un meme element peut aussi recevoir plusieurs classes. 

Supposons que vous mettiez en place la classe titre2 suivante : 

.titre2 { 
text-align: center; 

} 
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On pourra appliquer sur un meme element les differentes classes creees comme suit : 
<h2 class="sommai re titre2">titre de niveau 2 en rouge et centre</h2> 

Les identificateurs 

Un identificateur (identifiant, ou id) est lui aussi un nom choisi librement (en se 
limitant aux caracteres alphanumeriques classiques). II se distingue de la classe en ce 
qu'il ne peut porter qu'au plus sur un objet du document. 

Les selecteurs CSS s'y referent par l'emploi d'un caractere diese (#) suivi de son nom 
(exemples : #exemple, #toto, #banniere2, etc.)- Si par exemple l'une des zones de la 
page comporte un encart avec un menu structure par une balise <div> contenant a 
son tour plusieurs autres elements, cette balise sera specifique a l'encart. 

C'est a son niveau qu'il faut intervenir pour appliquer la mise en forme propre a ce 
menu (un arriere-plan jaune). On pourra pour cela attribuer a ce <div> une classe 
(.encart) ou un identificateur (#encart). Cet encart etant unique au document (ou 
Ton ne trouve aucun autre element comparable), nous privilegierons la solution de 
l'identificateur en ecrivant la regie CSS : 

#encart { 

background-color: yellow; 
} 

Dans le code HTML, on precisera cet identificateur comme suit : 
<div id="encart">contenu de 1 'element</div> 

Rappelons que seule cette balise <div> pourra porter l'identificateur encart dans le 
code HTML. Celui-ci sera interdit a tous les autres elements. 

Plus un code est rigoureux, moins il laissera passer d'erreurs d'inattention et plus il 
sera facile a relire et maintenir. C'est pourquoi on preferera les identificateurs aux 
classes a chaque fois qu'il sera possible de les utiliser. Prenez done le reflexe d'attri- 
buer un identificateur aux objets uniques de votre code. On trouve souvent un bloc 
d'en-tete, un bloc publicite, un bloc rubriques annexes, etc. Les paragraphes ou listes 
de menus, susceptibles d'apparaitre plusieurs fois dans un document HTML, seront 
quant a eux qualifies a l'aide de classes. 

Les pseudo-classes et les pseudo-elements 

Les pseudo-classes et les pseudo-elements creent des mecanismes ou des relations 
qui ne sont pas realisables en HTML. CSS cree en effet des elements specifiques a 
certaines actions (comme le survol d'un lien) ou a certaines arborescences (comme le 
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premier paragraphe d'un bloc). Ces techniques permettent de styler un contenu 
n'apparaissant meme pas dans le code du document. 

Un exemple courant est i'utilisation de la pseudo-classe : hover, qui prend effet 
lorsque le pointeur de la souris survole l'element concerne. Ainsi, la regie suivante 

a: hover { 

text-decoration: none; 
} 

affectera tous les liens de la page lors de leur survol par le pointeur de la souris. 
I <a href="...">texte du 1ien</a> 

Avec cette instruction, les liens hypertextes - soulignes par defaut - apparaitront sans 
ornement lorsque le pointeur de la souris les survolera. 

On peut evidemment utiliser de concert pseudo-classes et classes. Pour n'agir que sur 
les elements <a> de la classe . 1 ien, nous procederions comme suit : 

a. lien: hover { 
text-decoration: none; 
color: red; 

} 

Ceci affectera done tous les liens de la classe 1 ien lors de leur survol par le pointeur 
de la souris : 

<a class=""lien" href="...">texte du 1ien</a> 

Les pseudo-elements : first-letter et :first-1ine (qu'Internet Explorer ne 
reconnait qua partir de sa version 6) agissent sur la premiere lettre ou la premiere 
ligne d'un paragraphe, independamment de la balise qui structure sinon ce contenu. 
Le chapitre consacre aux mises en forme typographiques evoquera d'autres applica- 
tions pratiques de ces elements CSS. 



Compatibility Internet Explorer et la pseudo-classe :hover 

La pseudo-classe :hover permet d'affecter un style particulier lorsque l'element designe est survole. A 
priori, cette pseudo-classe n'est pas reservee a l'element de lien <a> mais peut etre appliquee a tous les 
elements ; ainsi est-il possible de modifier la couleur d'arriere-plan d'un bloc entier lors du survol a I'aide 
de la souris. 

Cependant, jusqu'a sa version 6, Internet Explorer ne prend en charge :hover que lorsqu'elle est appli- 
quee a l'element <a>. IE7 corrige cette lacune et etend son application a tous les elements. 
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Syntaxes de regroupements 

Certaines regies permettent de faciliter et d'alleger considerablement la production 
de code CSS. Observer ces principes simples vous fournira des feuilles de styles 
aerees, bien plus comprehensibles. 

Regroupement des selecteurs 

La premiere construction syntaxique utile permet de regrouper des selecteurs. Au 
lieu de repeter la meme regie pour plusieurs elements, on pourra factoriser leurs 
selecteurs en les separant par des virgules. Ainsi, la sequence : 

.texte { 
margin-left: 0; 
} 

P { 
margin-left: 0; 

} 

hi { 

margin-left: 0; 

} 

h2 { 

margin-left: 0; 

} 

sera equivalents a la regie unique : 

.texte, p, hi, h2 { 
margin-left: 0; 
} 

Cette derniere declaration annulera la marge gauche de tous les elements de classe 
. texte, de tous les paragraphes et de tous les titres de premier et de deuxieme niveau. 

Regroupement des proprietes 

Certaines proprietes generiques prevoient une version raccourcie, permettant l'appli- 
cation de plusieurs valeurs en une seule declaration. Ainsi, la propriete font ras- 
semble les valeurs des proprietes font-style, font-size, font-family, font-weight 
et 1 i ne-hei ght. C'est ainsi que Ton pourra reduire la regie : 
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P { 

font-family: Arial, sans-serif; 

font-style: italic; 

font-weight: bold; 

font-size: 120%; 

line-height: 140%; 

} 

de la maniere suivante : 

P { 

font : italic bold 120%/140% Arial , sans-serif; 

} 

D'autres proprietes raccourcies pourront s'averer bien utiles : 

• border pour border-width, border-style, border-color. 

• background pour background-image, background-color, background-position, 
background- repeat, background -attachment. 

Ces exemples sont donnes a titre indicatif et pour illustrer le principe de regroupe- 
ment. Toutes ces proprietes seront detaillees ulterieurement. 

Les selecteurs et l'arborescence 

Certaines des constructions syntaxiques specifiques facilitent la selection des ele- 
ments en CSS. 

Selon la structure du document et principalement son arborescence (c'est-a-dire la 
hierarchie des blocs, chacun etant place « sous » l'eventuel bloc qui le contient), il est 
possible de pointer directement certains elements en fonction de leur situation dans 
le document. Cette technique porte le nom de « selection hierarchique ». 

Cet ouvrage ne visant, rappelons-le, ni a l'exhaustivite ni au role de manuel de refe- 
rence des specificites de CSS, nous n'aborderons que certaines de ces regies les plus 
utiles ou les plus courantes. 

L'arborescence du document permet de selectionner plus aisement les divers ele- 
ments que Ton souhaite modifier. On peut comme cela se limiter aux balises dotees 
de certaines classes ou de certains identificateurs. Ainsi : 



a.toto {background-color: yellow;} 
ne designera que les liens <a> de classe toto. 
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Consequences : 

• <a class="toto" href="...">lien a fond jaune</a> 
arborera un arriere-plan jaune. 

• <p class="toto">paragraphe a fond jaune?</p> 
ne subira aucune modification. 

• <p class="toto"xa href="...">lien a fond jaune?</ax/p> 
ne subira aucune modification non plus. 

L'imbrication dans les selecteurs permet aux regies CSS de ne concerner que les ele- 
ments descendant d'autres elements precis. On peut ainsi ne cibler que les paragra- 
phes contenus dans un bloc <div> sans influencer les autres paragraphes du docu- 
ment. Pour cela, on ecrira le selecteur sous la forme « ancetre descendant » en 
separant ces deux elements d'un blanc. 

Ainsi, la regie a img {border-width: 0;} ne supprimera que les bordures des 
images contenues dans un lien. II est imperatif que la balise <i mg> descende de la 
balise <a> pour que la regie s' applique. 

II n'est toutefois pas necessaire que ces deux balises descendent directement l'une de 
l'autre : un ancetre plus lointain conviendra. 

Simplifier grace a la hierarchie 

Dans un site web bien architecture, cette methode permet d'eviter le recours aux 
classes dans la plupart des cas. Vous vous epargnerez ainsi bien du code inutile et tra- 
vaillerez plus rapidement et plus efficacement. En effet, on peut tres facilement sim- 
plifier des structures comme celle-ci : 

<ul id="menu"> 

<lixa class="lienmenu" href="...">premier lien du men u</ ax/1 i> 

<lixa class="lienmenu" href="...">deuxieme lien du menu</ax/"li> 

<lixa class="lienmenu" href="...">troisieme lien du menu</ax/li> 

</ul> 

sous une forme ne faisant pas appel aux classes sur les liens : 

<ul id="menu"> 

<lixa href="...">premier lien du menu</ax/li> 

<lixa href="...">deuxieme lien du menu</ax/li> 

<lixa href="...">troisieme lien du menu</ax/li> 

</ul> 
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Tous les liens <a> descendant de la balise <ul> (via l'element intermediaire <li>), il 
est tres facile de les designer par leur position hierarchique : 



#menu a {proprieties} 



On peut evidemment preciser cette declaration en ajoutant des elements de l'arbo- 
rescence. Dans ce meme exemple, on obtiendrait le meme resultat en explicitant dans 
le selecteur le niveau hierarchique intermediaire : 

#menu li a {proprieties} 

Familiarisez-vous des maintenant avec ces notations, car elles reviendront continuel- 
lement dans les exemples de l'ouvrage. 

Autres selecteurs hierarchiques 

Les normes CSS 2 et CSS 3 (actuellement en preparation) prevoient d'autres formes 
de selection hierarchique. On peut ainsi ne designer que le premier enfant d'un ele- 
ment, ne pointer que des elements directement adjacents a un autre, etc. 

II est meme possible de prendre en compte les attributs des elements pour les selec- 
tionner. Ainsi, la regie a[title="menu"] {color: blue;} ne colorera en bleu que les 
liens possedant un attribut title de valeur menu. C'est par exemple le cas de <a 
href="..." title="menu">lien en bleu</a>. 

Pour des raisons de compatibilite, nous n'evoquerons pas ces precedes, malheureuse- 
ment pas pris en charge par l'incontournable Internet Explorer 6. Ces techniques de 
selection hierarchique ayant cependant le vent en poupe, il est recommande de s'y 
interesser. Vous pourrez notamment consulter la documentation CSS en ligne du 
centre de formation Mediabox, a l'adresse http://wiki.media-box.net/documentation/css 



NOUVEAUTE Internet Explorer 7 change la donne 

La derniere version du navigateur de Microsoft prend en charge plusieurs nouveaux selecteurs CSS2 : 

• :first-child designe le premier element de son element parent. 

• div>p : le signe « > » designe un selecteur d'enfant. II s'applique a l'element <p> enfant de <div>. 

• div+p : le signe « + » designe un selecteur adjacent. II s'applique a <p> lorsqu'il est precede d'un ele- 
ment <div>. 

• a[title="menu"] : le selecteur d'attribut s'applique sur un element (ici <a>) lorsque I'attribut de l'ele- 
ment (ici title) contient une valeur definie (ici "menu"). 
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Caricature Maladies exotiques des CSS ? 

Passer au « tout CSS » est toujours une experience exaltante qui apporte chaque jour 
son lot de decouvertes, d'incomprehensions et parfois de remises en question. 
Cette demarche n'est pas anodine : comme I'evoque Jeffrey Zeldman dans son 
ouvrage Design web: utiliser les standards (Editions Eyrolles, 2005), les explorateurs inex- 
perimentes sont susceptibles de contracter des maladies exotiques bien etranges... 
Zeldman fait etat de deux maux principaux : la « divite » et la « classite ». Ajoutons 
trois autres affections courantes : la « cellulite », la « negativite », et la « strictite ». 
Pernicieuses, epidemiques, ces maladies se manifestent toutes par la production d'un 
code desordonne, ne respectant plus les principes fondamentaux de tout webmaster 
qui se respecte. Aucune n'est a prendre a la legere car toutes peuvent atteindre 
n'importe quel webmaster penetrant sur les terres des CSS. 

La divite chronique 

Tres frequente, elle se developpe en priorite chez les jeunes explorateurs de CSS. 
Cette maladie a deja fait I'objet d'etudes sur Alsacreations et Openweb, recueils 
medicaux specialises dans ce domaine. 

Symptomes : crise de la perception du monde sense, le malade ne jurant plus que 
par une seule balise : I'element <div>, par lequel il remplace toutes les structures uti- 
lisees auparavant (tableaux imbriques, paragraphes, titres, citations, etc.). Le patient 
transforme done tout ce qu'il a connu en <div>. II s'exprime souvent de la sorte : 
« Sus aux tableaux ! Je les remplace par des <di v>) ». 

Consequences : transformer cent cellules de tableaux imbriquees en autant de 
<div> imbriques ne resout rien. La structure, plus complexe, est devenue incompre- 
hensible et inutilisable. 

Pire : remplacer toutes les balises logiques (<p>, <hl>, <cite>, <b"lockquote>, ...) par 
la balise unique et generique <div> fait perdre aux documents tout leur sens et 
toute leur semantique, les rendant inintelligibles aux navigateurs non graphiques et 
aux moteurs de recherche. 

Traitement : un traitement lourd est necessaire. II faut (re)apprendre au patient qu'un 
document HTML doit avoir du sens et qu'il faut y utiliser chaque balise a bon escient : 
<p> structure des paragraphes, <div> delimite les grandes zones du document, <hl>... 
<h6> denotent les niveaux de titres, <u"l> introduit les listes et menus, etc. Le risque de 
rechute est alors faible. 

La classite aigue 

C'est une admiration exacerbee des classes CSS, proche de la devotion. Certaines the- 
ses y voient un rapprochement religieux. 

Symptomes : la classite se manifeste par une utilisation a outrance des proprietes 
class sur chaque balise rencontree. Ce besoin d'identifier chaque element par une 
classe (souvent repetee) temoigne d'un soudain manque de confiance en soi provo- 
que par une connaissance evasive des selecteurs CSS et de leur heritage parent-enfant. 
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Voici un exemple illustrant ce symptome : 

<div id="menug"loba"l"> 
<ul class="menu"> 

<1i class="menuitem"xa class="bouton" href="#">Lien l</ax/1i> 
<1i class="menuitem"xa class="bouton" href="#">Lien 2</ax/1i> 
<1i class="menuitem"xa class="bouton" href="#">Lien 3</ax/1i> 
<1i class="menuitem"xa class="bouton" href="#">Lien 4</ax/1i> 
</u"l> 

</div> 

Consequences : prise de poids soudaine et excessive (exprimee en octets). Le code 
est inutilement alourdi et la repetition de ces proprietes le rend parfois difficile a 
interpreter. 

Traitement : une cure d'apprentissage des selecteurs CSS et de leurs proprietes 
d'heritage est necessaire pour venir a bout de cette affection. 

Signalez au patient que seul le bloc parent a besoin d'une identification car les selec- 
teurs peuvent alors s'appliquer a toutes les balises qui en decoulent. Dans le cas pre- 
sent, nous pourrons simplifier le code precedent comme suit : 

<ul id="menu"> 

<lixa href="#">Lien l</ax/"li> 

<lixa href="#">Lien 2</ax/1i> 

<lixa href="#">Lien 3</ax/1i> 

<lixa href="#">Lien 4</ax/1i> 
</u"l> 

Le selecteur suivant permettra alors d'intervenir sur I'aspect des liens contenus dans 
ces listes : #menu li a {proprietes;} 

La cellulite ravageuse 

Cette forme de maladie est une reminiscence de nos anciennes habitudes de concep- 
tion de sites web a I'aide de tableaux et de cellules. Cette technique impliquait de 
multiples decoupes des elements en petites cellules, contenant chacune un morceau 
d'image de I'arriere-plan ou une partie du contenu. 

Symptomes : on reconnait le patient atteint de cellulite ravageuse a son obsession a 
vouloir tout decouper, imbriquer et « celluliser ». 

Par exemple, le site d'Alsacreations sera immediatement percu comme un encheve- 
trement elementaire de multiples cellules auxquelles seront appliques des equiva- 
lents des proprietes rowspan et col span. Autre symptome frequent: le patient 
continue de tronconner toutes ses images d'arriere-plan en plusieurs fichiers, se com- 
pliquant la tache pour integration de son code. 
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Consequences : a I'instar de la classite, la cellulite ravageuse implique une prise de 
poids consequente chez le malade. Elle produit surtout une structure inextricable et 
illogique, opaque meme aux yeux d'un utilisateur averti. 

Avec le temps et 1'evolution de la maladie, le patient ne comprendra plus son propre 
code. Quant aux navigateurs, la complexity du site les incitera a mal interpreter les 
documents. 

Traitement : cette pathologie lourde necessite une complete remise en cause de ses 
propres conceptions et de son experience de webmaster. 

Plutot que de regarder les mises en page « a plat », le patient devra prendre du recul 
et distinguer la profondeur des elements : telle image n'est pas incrustee dans le 
design, elle se situe au-dessus; tel arriere-plan ne fait pas partie du menu, il occupe 
un autre niveau de profondeur, etc. C'est toute la difference : les objets ne sont pas 
places les uns a cote des autres, mais souvent superposes en differents niveaux de cai- 
ques. II faudra aussi bousculer ses idees recues et lui faire comprendre que c'est une 
mauvaise idee d'eclater les grandes images en une multitude de petits morceaux. 

La negativite virulente 

C'est I'obstination a nier en bloc I'existence des maladies precedentes. Le malade 
reste cloitre dans son monde et refuse de s'ouvrir a la realite. II feint de croire aux 
promesses des standards CSS tout en refutant chaque argument propose en leur 
faveur. 

La strictite aveugle 

Cette nouvelle forme de contagion fait croire aux debutants que tous les sites web 
doivent etre valides en XHTML Strict. 

Mefiez-vous de ces charlatans de la medecine qui vous submergent de remedes 
(regies, doctypes, prologues). Le debutant est alors noye de doctrines a respecter, 
alors qu'il est souvent preferable d'aller a son rythme, de commencer en transition- 
nel, voire de conserver un squelette minimal en tableaux et d'y inserer les mises en 
forme CSS par a-coups. 



Introduction aux feuilles de styles CSS 

Chapitre 3 



body> 




ul> 




"lixa 


href="... 


lixa 


href="... 


lixa 


href="... 


lixa 


href="... 


lixa 


href="... 


lixa 


href="... 



Mise en situation 

Continuons le projet de site touristique sur I'Alsace en reprenant la structure eta- 
blie au chapitre precedent : 



'>Retour a 1 'accueil</ax/li> 

'>Presentation de la region</ax/li> 

'>Historique de 1 'Alsace</ax/li> 

'>Castronomie locale</ax/li> 

'>H6tels et gites</ax/li> 

'>Photographies</ax/l i> 
</ul> 

<hlxa href="photos. htm" title="photos d'Alsace">Bienvenue en Alsace 
</ax/hl> 

<h2>Une belle region f rangaise</h2> 
<p>[Paragraphe associe au sous-titre de niveau 2.] 
<a href="photos .htm" title="lien vers des photos d'Alsace"> 
<img src="image.png" alt="photographie" /x/ax/p> 
<h2>Un patrimoine considerable</h2> 

<p>[Paragraphe associe a cet autre sous-titre de niveau 2.]</p> 
<p>Pied de page et <a href="...">Mentions legal es</ax/p> 
</body> 

Cette deuxieme etape coulera les fondations de la structuration et de la mise en 
page du document web. Nous nous emploierons ici a « preparer le terrain » et a 
signaler certains elements des du document, en leur donnant un nom pour mieux 
les designer par la suite avec des selecteurs CSS. 

Exercice 

La premiere etape consiste a distinguer les differents elements significatifs du 
document en les affublant d'un identifiant (id). Nous les demarquerons les uns 
des autres selon la fonction et I'apparence que I'on prevoit pour eux plus tard 
(lesquelles seront exprimees par styles CSS). 

Combien d'elements pensez-vous devoir designer au minimum ? 



Mene a bien, ce type d'exercice produit un document bien realise et comprehen- 
sible par tous. II s'agit d'identifier un nombre d'objets minimal permettant de 
mettre en page facilement tout le document, sans tomber dans le piege consistant 
a identifier chaque element de la page par un identifiant ou une classe (voir 
encadre page 54). 
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On distingue deux parties tres differentes, correspondant a des zones graphiques 
separees : le menu de navigation et la partie de contenu general (comprenant les 
differents titres et paragraphes). Dans cette derniere, le paragraphe de pied de 
page se comportera differemment des autres. 

Nous attribuerons done un premier identifiant au menu, e'est-a-dire a la balise 
<ul> englobant la hierarchie de liste : 

I <ul id="menu"> 

Distinguons encore le paragraphe de pied de page en lui attribuant I'identifiant 
pied : 

<p id="pied">Pied de page et <a href="...">Mentions legal es</ax/p> 

Inutile en revanche de qualifier ou d'identifier le reste du contenu : pour y inter- 
vene, il suffira d'agir sur I'ancetre commun, la balise <body>. 

Nul besoin non plus d'attribuer un identifiant a I'element de titre principal (<hl>). 
Unique dans le document, il est deja facilement identifiable en CSS. 

Rappelez-vous cette regie essentielle : ne nommez pas systematiquement chaque 
element du document. Contentez-vous des elements parents ou ancetres, aux pre- 
miers niveaux des hierarchies. 
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Gestion de la 
couleur en CSS 



En abordant la question de la couleur, nous entrons de plein-pied dans l'outil CSS et 
le webdesign. Le mot « design » se rapporte au travail sur l'esthetique d'un objet uti- 
litaire produit par l'industrie. II a desormais conquis tous les secteurs d'activite et de 
production, notamment l'architecture, l'industrie, le graphisme (publicite, Web), etc. 
II s'agit de rendre « beau » un objet concu avant tout pour etre utile. Le webdesign, 
ou « design de sites web », s'inscrit dans cette lignee, et designe avant tout 1' alliance 
entre le graphisme et le cote fonctionnel d'un site... deux notions pas forcement 
antagonistes. N'oublions pas que la beaute et le graphisme ne forment qu'une partie 
d'un tout : un site web non ergonomique ne subsistera pas bien longtemps. II faut 
toujours s'efforcer a doser subtilement les cotes fonctionnel et esthetique. 

Dans ses recommandations en matiere de francisation des termes d'origine etran- 
gere, 1' administration proposa « stylique » pour le mot « design ». Cette suggestion 
n'a pas pris mais son etymologie renvoie sur les feuilles de styles CSS. La mise en 
forme d'un document web et les decisions relatives a son design se font en plusieurs 
etapes. La bonne utilisation des couleurs et des harmonies en etant un aspect fonda- 
mental, voyons quels outils les styles CSS proposent pour la prendre en charge. 
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Harmonie des couleurs 

Une charte graphique reussie comprend le choix judicieux d'une palette de couleurs 
conforme au theme general du site, a des criteres de jugement subjectifs, ainsi que des 
parametres plus classiques comme l'ergonomie generale et la lisibilite du document. 

L'importance des teintes est confirmee par l'histoire et la sociologie : toutes les cul- 
tures et tous les peuples ont cree leur symbolique des couleurs et associe a chacune sa 
valeur et son interpretation. 



Illustrations Couleurs et niveaux de gris 

Cet ouvrage est imprime en niveaux de gris, ce qui ne facilite pas la representation d'exemples portant 
sur la couleur et ses symboles. Je vous invite done a suivre les liens jouxtant les illustrations de ce chapi- 
tre pour vous faire une representation precise des explications qui les accompagnent 



La couleur et le theme du site 

Chaque site web est fonde sur un concept general et des objectifs principaux : vente, 
distraction, information, dynamique de communaute, etc. Cette ligne editoriale a 
des consequences sur le choix des couleurs. Ainsi, un site traitant d'informatique 
recourra souvent a des tons bleus, couleur froide qui se prete bien a des domaines 
technologiques. 



Figure 4-1 

Exemple de site 
informatique : 
www.hardware.fr 
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A l'inverse, des sites plus « conformistes » ou lies a l'histoire adopteront des teintes 
plus chaudes, dans les tons beige ou brun. 
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Figure 4-2 

Exemple de site lie 
a I'histoire : 
www.musee-orsay.fr 




Influence du public cible 

Le public vise influence grandement le choix des couleurs : un site web pour enfants 
ou adolescents affiche son dynamisme a travers des couleurs stimulantes et tres pro- 
noncees, alors que des portails pour seniors favorisent preferentiellement des cou- 
leurs reconfortantes et sereines. 



Figure 4-3 

Exemple de site 
pour enfants : 
www.disney.fr 
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Certains sites minimalistes ou tres portes sur l'ergonomie prennent la decision de 
conserver les couleurs par defaut du Web : liens en bleu et soulignes, liens visites en 
violet, afin de ne pas heurter la navigation des debutants. D'autres sites, futuristes ou 
avant-gardistes, adoptent des teintes originales volontairement provocantes. 



Figure 4-4 

Exemple de site 
minimaliste : 
www.google.fr 
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Certains heritages culturels sont solidement ancres dans les habitudes des designers. 
Les sites web consacres aux femmes adoptent frequemment des tons roses ou rouges, 
quand les sites pour hommes optent pour des couleurs associees au concept de virilite. 



Figure 4-5 

Exemple de site 
destine aux femmes : 
www.aufeminin.com 
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Le choix de la charte graphique du site est souvent inconsciemment influence par le 
public cible. C'est un moyen efficace de ne pas perturber les visiteurs, meme si un 
peu d'anticonformisme est parfois le bienvenu. 
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Choisir des couleurs harmonieuses 

Meme si « des gouts et des couleurs, on ne discute pas », les professionnels et l'expe- 
rience ont etabli des regies en matiere d'association des couleurs : certaines cohabi- 
tent mal, souvent pour des raisons evidentes de lisibilite du document. 



La symbolique des couleurs 

Les signes et influences attribues aux couleurs par les cultures et les societes 
humaines sont varies mais pas toujours contradictoires. Ainsi le noir, symbole de 
deuil et de tristesse en Occident, n'a pas la meme fonction dans les pays ou ce role est 
devolu a d'autres couleurs (notamment au blanc). Malgre tout, on peut brosser un 
tableau general de la symbolique des couleurs. 

Tableau 4-1 Les couleurs et leur symbolique 



Couleur Symbolique Exemples d'utilisation 

Blanc Le vide, I'espace, la purete, la proprete et la sobriete. Intervient rarement explicitement ; souvent 

C'est une couleur reposante et non agressive. relegue au second plan (une page web aeree se 

devant de presenter un arriere-plan allege). 
II permet aussi de faire ressortir les elements 
importants de la page. 

Symbole de deuil ou de tristesse, le noir est egalement Un fond noir donne une impression d'elegance : 
associe a I'art, a I'apparat et au luxe. on retrouve ainsi cette technique sur les sites 

web d'art, les boutiques de luxe ou les casinos. 

Le noir se marie tres bien avec les autres teintes. 



Noir 



Gris 



Vert 



Bleu 



Jaune 



Rouge 



Malgre sa connotation de melange, le gris est egale- 
ment une couleur passe-partout. 



Comme le bleu, cette couleur est souvent asso- 
ciee aux sites technologiques ou informatiques : 
les ordinateurs et le materiel informatique sont 
generalementgris. 



Sites en rapport avec la nature, la chasse ou les 
loisirs. 



Represente la nature et tout ce qui s'y rapporte. C'est 
aussi une couleur qui confere une impression de fraT- 
cheur saine : on la retrouve ainsi dans les sirops et 
chewing-gums rafraichissants. 

Couleur froide par excellence, le bleu inspire la rigueur Sites web technologiques ou scientifiques. 
et la science. II represente egalement de grands espaces 
comme le ciel ou la mer, conferant ainsi une impression 
de tranquillite. 



Couleur stimulante evoquant le dynamisme, le jaune 
attire I'ceil... mais trap de jaune agresse. 

Le rouge (avec I'orange) est la couleur chaude par excel- 
lence. Couleur associee a plusieurs elements tres forts, 
tels que le feu, I'amour, le sang. 



Sites associes a des themes dynamiques (sport, 
loisir, publicite, medias). 

Sa force rehausse la paleur generale et dirige le 
regard du visiteur. Un site a dominante rouge 
degage chaleur et passion. 
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La chaleur allant traditionnellement de pair avec chaque couleur joue un role impor- 
tant dans le design. Une couleur chaude est generalement associee au domaine du 
sentiment et de la perception ; elle attire l'oeil. Une couleur froide symbolise quant a 
elle le pragmatisme, l'esprit et la science ; elle ouvre l'esprit et le regard et agrandit 
l'espace. 

La couleur chaude par excellence est le rouge (et ses derives, notamment l'orange). 
Le bleu forme la couleur froide de base. Evitez de meler aleatoirement des nuances 
chaudes et froides ; efforcez-vous plutot de conserver une composition coherente sur 
ce point. 



Representation de la couleur 

Void peu, les limitations des ordinateurs empechaient de representer plus de 
256 couleurs simultanement. Les professionnels s'etaient alors accordes sur une 
palette web de 216 couleurs « securisees », permettant d'assurer une compatibilite 
parfaite entre les differents ordinateurs. 

En informatique, les progres sont rapides : presque tous les ordinateurs actuels sont 
capables d'afficher 16 millions de couleurs. La population concernee par cette palette 
securisee se reduit done constamment, mais tout site web frequente par un public 
dote d'anciens ordinateurs prendra garde a s'y limiter. 

Differents codages permettent de se referer aux couleurs dans les feuilles de styles. 
Certains reposent sur les couleurs fondamentales, d'autres se fondent sur la lumino- 
site, la teinte et la saturation. Nous nous contenterons de retenir les deux notations 
les plus frequemment utilisees par les webmasters. 

L'espace de couleurs RGB 

RGB (RVB en francais) est une abreviation de « red, green, blue », e'est-a-dire 
« rouge, vert, bleu ». Datant des annees 1930, ce systeme repose sur les caracteristi- 
ques techniques des tubes cathodiques. C'est done une notation convenant particu- 
lierement aux couleurs en informatique. 

L'espace RGB definit la proportion de chacune de ces trois couleurs fondamentales 
en la codant sur un octet, e'est-a-dire une valeur comprise entre et255. Chaque 
couleur est ainsi transcrite sur trois octets, ce qui represente pres de 17 millions de 
possibilites. C'est amplement suffisant, l'oeil humain ne discernant qu'un a deux mil- 
lions de couleurs differentes. 
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La notation RGB 

La syntaxe CSS pour la notation des couleurs en RGB est la suivante : 
rgb(0, 0,255) (ceci correspond au bleu) 

Zero sur le rouge, zero sur le vert, valeur maximale (255) sur le bleu : on devine aise- 
ment quelle couleur cette commande produit. On peut aussi inscrire les valeurs en 
pourcentages : 

I rgb(0, 0,100%) (autre representation du bleu) 

Ces couleurs fondamentales se composent a l'ecran par synthese additive, moins 
intuitive que la synthese soustractive, familiere aux peintres. C'est pourquoi il est 
utile de se familiariser avec les codes des couleurs les plus classiques : 

rgb(0,0,0) (noi r) 
rgb(255,255,255) (blanc) 
rgb(255,0,0) (rouge) 
rgb(0, 128,0) (vert) 
rgb(255, 255,0) (jaune) 

En modifiant la valeur de ces trois composantes, on peut representor toute teinte 
imaginable. On definira ainsi plusieurs variantes de bleu en n'agissant que sur le troi- 
sieme nombre. Cette notation est dite « decimale » car elle recourt au systeme de 
numeration familier, a dix chiffres. 

La notation hexadecimale 

C'est une autre maniere d'ecrire les nombres, plus adaptee a 1'informatique et notam- 
ment a la manipulation d'octets. On s'y autorise seize chiffres (les chiffres habituels 
completes par les six premieres lettres de l'alphabet - generalement ecrites en minus- 
cules). Deux caracteres peuvent alors exprimer 16 fois 16 (soit 256) valeurs diffe- 
rentes, de 00 (0) a f f (255). 

Le symbole diese (#) introduit une valeur RGB codee en hexadecimal. Les trois 
composantes sont rassemblees sur six caracteres : 

I #0000ff (bleu) 

Ces trois paires successives correspondent respectivement aux codages hexadecimaux 
des composantes rouge, verte, et bleue de la couleur consideree. Lexemple ci-dessus 
prevoit ainsi une quantite nulle de rouge et de vert et la quantite maximale de bleu. 
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On obtiendra la couleur desiree en dosant chaque paire de chiffres hexadecimaux. Le 
blanc correspond ainsi a la valeur #f f f f f f . Traduisons en hexadecimal les declara- 
tions de couleurs classiques : 

#000000 (noir) 

#ffffff (blanc) 

#ff0000 (rouge) 

#008000 (vert) 

#0000ff (bleu) 

#ffff00 (jaune) 



La notation hexadecimale courte 

Quand le codage hexadecimal d'une couleur se compose de trois paires jumelles, 
comme #ffffff, #cc55aa, #ffaa99, la syntaxe CSS permet de le condenser. On ne 
reporte pour cela qu'un seul caractere par couple, pour obtenir une notation a trois 
chiffres. Ainsi, #000000, #ffffff, #cc55aa et #ffaa99 deviennent respectivement 
#000, #fff, #c5aet#fa9. 

Cette technique ne pourra toutefois condenser des notations telles que #ffaa96, 
#3aaaaa, #00000f, car leurs paires de caracteres consecutifs ne sont pas composees 
des memes chiffres hexadecimaux. 

Les mots-cles de couleurs 

L'etre humain preferant souvent les mots aux nombres, le W3C a integre a CSS cer- 
tains mots-cles anglais, representant les couleurs les plus utilisees. Le mot green est 
plus facile a relire que les composantes standards du vert, qu'elles soient ecrites en 
decimal ou en hexadecimal. 

Aux principales couleurs correspond ainsi un mot-cle plus intuitif que son code : 
black designe le noir, white le blanc, red le rouge, blue le bleu, green le vert, et 
yel 1 ow designe le jaune. 

Tableau recapitulatif 

Pour clarifier et synthetiser la situation, rien de tel qu'un tableau exprimant les 
16 couleurs les plus frequentes dans chacun des trois systemes vus ci-dessus (les 
codes en hexadecimal court ne sont donnes que quand ils existent). 
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Tableau 4-2 Recapitulatif des notations de couleurs 



Couleur 


Mot-cle 


RGB 


Hexadecimal 


Hexadecimal court 


Noir 


black 


rgb(0,0,0) 


#000000 


#000 


Blanc 


white 


rgb(255,255,255) 


#ffffff 


#fff 


Gris 


gray 


rgb(128,128,128) 


#808080 




Argent 


silver 


rgb(192,192,192) 


#c0c0c0 




Bleu 


blue 


rgb(0, 0,255) 


#0000ff 


#00f 


Bleu marine 


navy 


rgb(0, 0,128) 


#000080 




Cyan 


cyan 


rgb(0,255,255) 


#00ffff 


#0ff 


Cyan fonce 


teal 


rgb(0,128,128) 


#008080 




Vert 


green 


rgb(0, 128,0) 


#008000 




Vert olive 


olive 


rgb(128, 128,0) 


#808000 




Vert clair 


lime 


rgb(0, 255,0) 


#00ff00 


#0f0 


Lilas 


fuschia 


rgb(255, 0,255) 


#ff00ff 


#f0f 


Violet 


purple 


rgb(128, 0,128) 


#800080 




Rouge 


red 


rgb(255,0,0) 


#ff0000 


#f00 


Marron 


maroon 


rgb(128,0,0) 


#800000 




Jaune 


yellow 


rgb(255, 255,0) 


#ffff00 


#ff0 



Quelques ressources sur le Web 

Les couleurs et leur symbolique sont largement abordees sur le Web. Pour les sites en 
francais, l'une des references en la matiere est le celebre www.pourpre.com. II aborde 
exhaustivement les couleurs, de facons variees et souvent poetiques. C'est un site a 
visiter de toute urgence, ne serait-ce que pour son ambiance reposante et ses articles 
tres didactiques. 

Pour tester et simuler les differentes teintes de votre charte graphique et en observer ins- 
tantanement les accords chromatiques, rendez-vous sur le site www.smartpixel.net/ chro- 
moweb/fr/. Plusieurs gabarits vous proposeront aussi de peaufiner vos choix de couleurs. 

Les lecteurs comprenant l'anglais trouveront sur www.colormixers.com un outil les 
conseillant sur les bons accords entre couleurs (dominantes, toniques, etc.), cles d'un 
design reussi. Sa nouvelle maquette, plus evoluee, reussie et compatible (elle fonc- 
tionne desormais avec le navigateur Mozilla) vous permettra de charger des themes 
predefinis de couleurs, d'en creer de nouveaux, d'exporter vos couleurs vers les logi- 
ciels Photoshop ou Illustrator, etc. 

Votre charte graphique etablie, vous pourrez peut-etre postuler sur 
www.joliespages.com et apparaitre dans sa galerie de sites au design reussi. 
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Application pratique 



Voici une liste de couleurs, exprimees soit par mot-cle, soit par une notation 
hexadecimale ou RGB. 

Amusez-vous a trouvez leur correspondance en notation hexadecimale courte. 

Pour vous aider, n'hesitez pas a decouvrir la palette complete des 216 couleurs 
securisees en CSS : http://www.laltruiste.com/courshtml/couleur.html. 



1 


#dcdcdc 


2 


lime 


3 


gray 


4 


rgb(100%,0,100%) 


5 


#ddcbdd 


6 


indigo 


7 


#fffffO 


8 


magenta 


9 


purple 


10 #d2d2d2 



Reponses 

1 #dcdcdc 

2 lime 

3 gray 

4 rgb(100%,0,100%) 

5 #ddcbdd 

6 indigo 

7 #fffffO 

8 magenta 

9 purple 
10 #d2d2d2 



#dcdcdc (pas d'ecriture courte possible) 

#OOffOO -> #OfO 

#808080 (pas d'ecriture courte possible) 

#ff00ff (en hexadecimal) --> #fOf 

#ddcbdd (pas d'ecriture courte possible) 

#4B0082 (pas d'ecriture courte possible) 

#fffffO (pas d'ecriture courte possible) 

#ff OOff --> #f Of 

#800080 --> (pas d'ecriture courte possible) 

#d2d2d2 --> (pas d'ecriture courte possible) 
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La typographie et la 
mise en forme de caracteres 



On l'oublie parfois, mais le fondement du Web est de presenter du contenu. Quelle 
que soit sa charte graphique, un site web sans contenu manquera son objectif et 
n'aura pas de visiteurs reguliers. Les styles CSS joignent l'utile a l'agreable et met- 
tront en forme les portions de texte de vos documents. 



Les polices de caracteres 

Les diverses versions de HTML ont peu a peu integre des mises en forme du texte. 
Avant CSS, il etait deja possible de definir un choix de police, une taille, un style et 
quelques effets. Ces facultes limitees restent toutefois deconseillees : elles sortent du 
cadre fonctionnel du langage et empietent sur celui de la mise en forme. 

CSS, bien plus adapte aux choix de representation des textes, propose d'autres 
fonctionnalites : gestion de la justification du texte, largeurs de graisse differentes, 
interlignage et interlettrage, surlignement, modification de la casse, etc. Quelques 
effets de style bien choisis permettent ainsi a un texte d'adopter une presentation 
esthetique, conferant un grand confort de lecture. 
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Polices standards et exotiques 

Vous serez peut-etre surpris d'apprendre que toute police de caracteres retenue pour 
un site web ne sera pas systematiquement reproduite de la meme maniere sur les 
ecrans des visiteurs - certains n'en tenant meme aucun compte. En effet, les polices 
n'y sont qu'evoquees ; elles doivent etre fournies par les ordinateurs de visualisation. 

Si la police precisee par le site web est absente du systeme client, elle y sera remplacee 
par une police par defaut : Times New Roman sur compatibles PC ; Times sur Mac. 
Cette derniere, peu adaptee aux textes de petite taille, genera la lecture du site. Pour 
eviter ces mauvaises surprises et leurs inconvenients, il est recommande de se limiter 
aux polices standards. 



Les polices standards 

Chacun peut installer des polices complementaires sur son ordinateur, mais rien n'en 
garantit la presence sur tout systeme visitant votre site. En revanche, il est rare qu'un 
utilisateur efface des polices installees par defaut par son systeme ou par son naviga- 
teur, ce qui permet d'etablir une liste de polices probablement disponibles partout. 

Si Ton considere les systemes d'exploitation les plus courants (Windows et ses 
variantes, Mac, GNU/Linux et les Unix), il est possible d'etablir une liste de 11 polices 
de caracteres dites standards, auxquelles tout webdesigner tachera de se limiter. 

Tableau 5-1 Les polices standards 



Norn 


Caracteristiques 


Usage 


Arial 


Sans serif 


Imprime, Web 


Arial Black 


Sans serif, forte graisse 


Imprime, Web 


Comic Sans MS 


Police fantaisie, sans serif 


Web 


Courier New 


Chasse fixe 


Listing, Code 


Georgia 


Empattements simples (serif) 


Web 


Impact Monotype 


Sans serif 


Imprime, Web 


Symbol Monotype 


Alphabet grec 


Imprime, Web 


Times New Roman 


Empattements (serif) 


Imprime, Web 


Trebuchet MS 


Sans serif 


Web 


Verdana 


Sans serif 


Web 


Webdings 


Police fantaisie 


Web 
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Declarer la police en CSS 

C'est la propriete font-family qui permet de controler la police affectee a un ele- 
ment du site (qu'il s'agisse du document complet ou de l'une de ses parties). Le code 
suivant applique ainsi la police Trebuchet MS a l'ensemble du document : 

body { 

font-family: 'Trebuchet MS'; 

} 

Cette propriete se transmettant hierarchiquement par heritage, elle vaudra egale- 
ment pour tous les descendants de l'element <body>, c'est-a-dire a toute la page web. 
II sera done inutile de preciser une police pour chacun d'entre eux, sauf evidemment 
pour en changer. 

Si Trebuchet MS est absente de l'ordinateur, elle y sera remplacee par Times. Pour 
eviter cela, on precisera plusieurs valeurs a font-family, ce qui en etendra les possi- 
bilites. Par exemple : 

body { 

font-family: 'Trebuchet MS', times, verdana; 

} 

Les families de polices generiques 

Toutes les polices sont classees par families generiques, qui les regroupent selon leur 
empattement, leur chasse, ou leur style. On trouve ainsi les families serif, sans serif, 
monospace (polices a chasse fixe), cursive et fantasy - les trois premieres etant les 
plus courantes sur le Web. Les dernieres relevent du gadget et nous ne nous y attar- 
derons pas. 

Preciser plusieurs families dans la declaration font-family augmente la probabilite 
que le visiteur disposera d'au moins de l'une d'entre elles. Par exemple : 

body { 

font-family: 'Trebuchet MS', times, verdana, sans-serif; 

} 

Les empattements des caracteres s'appellent serifs (exemple : police Times). Un « i » 
majuscule sans serif a Failure d'un simple trait vertical. Avec serifs, il arbore de petits 
traits horizontaux, selon la forme d'un « H » renverse. Ainsi, les titres et sous-titres 
de cet ouvrage sont ecrits sans serifs, mais le corps du texte principal y recourt. 
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Les serifs, issus de l'imprimerie traditionnelle, ne conviennent pas toujours a une uti- 
lisation pour le Web. lis genent notamment la lecture dans les petites tailles, ou les 
empattements accentuent la pixellisation et son crenage (ou « effet d'escalier »). 

Les polices sans serifs, denuees d'empattements, sont d'apparence plus simple et plus 
sobre. Leur confort de lecture sur ecran les fait souvent privilegier dans les chartes 
graphiques pour le Web. Les plus frequentes sont Verdana et Arial. 

Les polices a chasse fixe, dites monospace, attribuent a chaque caractere une largeur 
constante, comme sur les machines a ecrire (les « m » des textes imprimes etant au 
contraire generalement plus larges que leurs « 1 »). Dans cette famille, on retient sou- 
vent Courier New pour l'affichage de code, de listings et de toutes les portions de 
texte a reproduire verbatim. 

Pour eviter que le systeme client opte pour une solution par defaut faute de disposer de 
la police demandee, il est d'usage d'en preciser trois types : une police pour compatibles 
PC, une autre pour Mac, en concluant par une famille generique disponible partout : 

body { 

font-family: 'Trebuchet MS', times, serif; 

} 

Cet exemple limite les mauvaises surprises : le navigateur cherche d'abord Trebuchet 
MS. En son absence, il tentera Times et optera pour la police generique avec serifs 
en dernier recours. Autre solution : 

body { 

font-family : arial, helvetica, sans-serif; 

} 

Cette technique oriente le choix des polices par defaut et assure un affichage 
« maitrise » du contenu du site web. 

Pour des raisons syntaxiques, il est obligatoire en CSS de proteger les noms com- 
poses par des apostrophes simples (') ou doubles (")• Ainsi, on peut ecrire arial 
mais on devra ecrire 'Trebuchet MS' ou "Trebuchet MS". 

Affichage des polices exotiques 

Les polices peu courantes ou exotiques sont rarement necessaires sur les sites web. 
Vous l'avez deja compris, elles sont meme deconseillees. II est pourtant parfois utile 
de s'en soucier, notamment dans le cas de sites internationaux devant s'afficher dans 
de multiples langues. 
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Les polices standards n'etant pas adaptees a ce genre d'utilisation, il faut se tourner 
vers d'autres solutions. En voici quelques-unes. 

Utiliser un format graphique 

L'une des solutions les plus simples a mettre en oeuvre - et de loin la plus deconseillee 
- consiste a transformer les textes exotiques en images, dans un format bitmap (GIF, 
JPEG, PNG) ou vectoriel (Flash). Cette idee plaisante presente certains 
inconvenients : 

• Une image occupe dix a cent fois plus d'espace que son equivalent texte. II est 
done hors de question de transformer une page entiere en image (on pourra limi- 
ter cette operation aux titres). 

• Inserer des images de texte dans un code HTML remet en cause la separation 
entre structure et mise en forme. Cela complique aussi les maintenances et mises 
a jour : il faudra reprendre et modifier chaque image, travail titanesque si le site 
web en compte plusieurs centaines. 

• Meme si sa propriete alt est renseignee (a contre-emploi de son role theorique de 
texte alternatif), une image reste moins accessible aux non-voyants et sera mal 
exploitee par les moteurs de recherche et les navigateurs en mode texte. 

Utiliser le format PDF 

PDF (Portable Document Format) est un format de fichiers developpe par Adobe 
Systems et lisible sur toute plate-forme (Windows, Mac, Unix). Un document PDF 
s'affiche a l'identique sur chaque poste client, quelle qu'en soit la configuration. II 
embarque textes et illustrations, propose des liens hypertextes et la possibilite de 
rechercher des termes particuliers. 

Ce format est maintenant bien integre dans les navigateurs web. Ceux-ci ne recon- 
naissant pas PDF nativement, il faut qu'un greffon (ou plug-in) fonctionnellement 
equivalent a Adobe Acrobat Reader y soit installe. Les moteurs de recherche permet- 
tent desormais d'indexer et de retrouver les documents PDF presque aussi bien que 
les documents HTML. 

Cette solution, interessante pour la production de documents a imprimer (tels que 
cours, dossiers ou articles divers), n'est pas appropriee pour la conception integrale 
d'un site web. En effet, un document PDF est plus volumineux qu'un document 
HTML classique et il est moins souple a manipuler a l'ecran. 

Importer des polices de caracteres 

Si l'ordinateur du visiteur ne dispose pas de la police souhaitee par le site web, on 
peut imaginer de la lui fournir. Deux societes se sont interessees a cette question : 
Microsoft et Bitstream. 
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Publication Choisir un format adapte pour le Web 

Comprenez bien que PDF n'a pas ete con^u pour le Web. Ses limitations sont nombreuses : il est ainsi 
impossible d'inserer un fragment PDF dans un document HTML, d'imposer I'ouverture de certains liens 
dans une nouvelle fenetre, etc. 

On reservera done son utilisation a des cas tres precis, comme la presentation de typographies particulie- 
res qui doivent s'afficher de la meme maniere sur tous les postes clients. 



Des 1997, Microsoft propose la technique Web Embedding Fonts, reposant sur le 
logiciel WEFT. Elle permet de creer des polices de caracteres dynamiques, stockees 
sur le serveur pour affichage dans les documents web. Le visiteur pourra ainsi dis- 
poser de cette police meme si elle n'est pas installee sur son ordinateur. Sur le meme 
principe, Bitstream developpe l'outil Webfont Maker. Ces techniques sont 
proprietaires : WEFT (polices . eot) ne sera visible que sur Internet Explorer pour 
Windows et la methode Webfont Maker (polices . pf r) ne fonctionnera que sous 
Netscape Navigator. II me parait done inutile de les developper et d'entrer dans le 
detail de leur mise en oeuvre. 

Nouvelles solutions pour polices exotiques 

D'autres techniques sont en cours de standardisation : le W3C s'interesse de pres a 
l'internationalisation et a la multiplicite des langues et dialectes. Encore jeunes, ces 
techniques sont peu exploiters par les navigateurs actuels. II est done encore trop tot 
pour conclure de maniere definitive et satisfaisante sur ce sujet. La meilleure solution, 
si e'est possible, est d'eviter le recours a toute police inhabituelle ou non standard. 

Les unites de taille de polices 

Deux systemes permettent d'indiquer les dimensions des elements en CSS (notam- 
ment les tailles des polices) : les unites de taille fixe et les unites de taille relative. 
C'estla propriete font-size qui determine la taille de la police d'un element. Elle est 
heritee : sa valeur sera done transmise a tous les descendants de 1' element considere. 

CSS 

p { 

font-size: 14px; 
} 

HTML 

<p>Toto est <span>mon heros</spanx/p> 

Dans cet exemple, l'element <p> utilise une taille de texte de 14 pixels. Lelement 
<span> en descendant, il occupe lui aussi 14 pixels, sauf indication contraire. 
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Les unites de taille fixe 

Les unites de taille fixe (ou unites absolues) sont le point (1 pt vaut environ 
0,35 mm), le pica (1 pc vaut environ 4,22 mm), le centimetre (cm), le millimetre (mm) 
et le pouce (1 i n vaut environ 2,54 cm). 

Le W3C conseille de limiter leur usage a des medias de sortie connus, aux proprietes 
determinees. En clair, on les evitera sur ecran d'ordinateur, chaque moniteur etant 
particulier (de par sa taille de diagonale, sa resolution, son nombre de couleurs, etc.). 
De telles unites sont toutefois parfaitement adequates a une sortie sur papier. Evitez 
vous aussi d'utiliser ces unites fixes dans 1' elaboration de votre site web et pour le 
calcul de vos dimensions et tailles de polices. 

Les unites de taille relative et pourcentages 

Les unites relatives sont le cadratin (em), la hauteur d'« x » (ex), le pourcentage (%) et 
le pixel (px). 

1 em represente la taille d'un caractere (ainsi que l'espace pour ses jambages) dans la 
police de reference. 1 ex correspond a la hauteur du caractere minuscule « x », sans 
jambages, dans la police de reference. Le pourcentage, s'il se prete bien aux textes et 
polices de caracteres, ne leur est pas specifique. II se definit relativement a la taille de 
reference dans le conteneur de l'element. 



Reference L'unite « em » 

Un excellent article de Florent Verschelde fournit une explication complete et concrete de l'unite « em » : 
► http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em 



Pour ces trois unites, la taille de la police de reference se transmet par heritage : dans le 
cas d'elements imbriques, la police de reference change a chaque nouveau conteneur. 
Ainsi, definir une taille de reference de 2 em dans un paragraphe puis une taille de 
2 em dans un de ses elements enfants, on attribue a ce dernier une taille de 2 em par 
rapport a 2 em, soit 4 em ! Tous les calculs se cumulent de meme : 

CSS 

p, span { 
font-size: 2em; 
} 

HTML 

<p>Toto est <span>mon heros</spanx/p> 

Dans cet exemple, les balises <p> et <span> recoivent chacune la taille de texte 2 em. 
<span> descendant de <p>, sa taille sera double de la taille de reference. 
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CSS 

p, span { 

font-size: 80%; 

} 

HTML 

<p>Toto est <span>mon heros</spanx/p> 

Ici, les elements <p> et <span> recoivent chacun la taille de texte de 80%. <span> des- 
cendant de <p>, sa taille sera 80 % de la taille de reference de <p>, soit 80 % de 80 % 
egale 64 %, de la taille de <body>. 

Pour conclure cette liste, le pixel (dit « unite relative » car sa taille depend de la plate- 
forme et de l'ecran d'ordinateur) est sans doute l'unite la plus utilisee. Sur un systeme 
donne, il restera une unite fixe partout dans le document. 

Les mots-cles de tallies 

Comme pour les couleurs, CSS propose des mots-cles pour definir les tailles de 
polices. Malheureusement, il n'en existe que sept. Par ordre croissant, ce sont xx- 
sma"N, x -small, small, medium, large, x -large, et xx -large. 

hi { 

font-size: large; 

} 

Ces tailles sont laissees a l'appreciation de chaque navigateur. Internet Explorer et 
Netscape Navigator afficheront ainsi des tailles differentes pour un texte medium. Ce 
spectre limite et ces differences d'appreciation limitent grandement l'interet de cette 
technique pour le le choix des tailles de polices. 

Permettre I'agrandissement des polices 

De nombreux utilisateurs souhaitent agrandir les polices. Pour certains, c'est meme 
une necessite (cas des malvoyants et autres deficients visuels). Les navigateurs graphi- 
ques integrent tous la possibilite d'afficher un site avec une taille de texte modifiee. 

Malgre tout, de nombreux webmasters, visant l'uniformite sur toutes les plates- 
formes, tentent d'imposer la taille de tous les elements de leur mise en page : images, 
arriere-plans, espacements, marges, taille des blocs et du texte. Cette demarche trahit 
un manque de respect et une inversion des priorites : le rendu d'un site web doit etre 
conforme aux attentes et souhaits de l'utilisateur, pas a ceux de son concepteur. En 
verrouillant ainsi la mise en page, l'auteur rend son site inutilisable ou desagreable, 
voire completement degrade si l'utilisateur augmente la taille de police. 
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En realite, un affichage correct n'implique d'imposer aucune dimension : seules les 
images et illustrations doivent avoir une taille specifiee et figee pour s'afficher dans 
les meilleures conditions. Partout ailleurs, on preferera des dimensions relatives : cela 
fluidifie la navigation sur le site. 

Prenez done l'habitude d'autoriser une certaine souplesse sur vos pages web. Sachez 
proposer plutot qu'imposer, surtout au niveau de la taille de texte. 

Pour information, et malgre son menu Affichage/Taille de texte, Internet Explorer 
refuse d'agrandir tout texte dont la taille est precisee en pixels (px) : les dimensions 
demeurent figees. Cette unite est done a proscrire pour les textes de petite taille. 

Styles et effets sur les caracteres 

CSS propose de nombreux styles typographiques. Nous distinguerons les styles 
prevus pour les caracteres (couleur, italique, soulignement, etc.) et ceux portant sur 
les mots et les paragraphes (interlignage, justification, crenage, etc.). 

Definir et modifier la couleur de police 

La propriete CSS color definit la couleur de police (la propriete font-color n'existe 
pas, quoi qu'imaginent de nombreux etourdis). C'est une propriete heritee : sauf pre- 
cision explicite contraire, tout element reprendra la couleur de son element parent. 

(Re)voyez le chapitre consacre a la couleur pour connaitre les valeurs possibles de 
cette propriete : notation RGB, notation hexadecimale et mots-cles. Pour afficher les 
textes de citations en bleu on pourra ecrire : 

blockquote { 
color: blue; 
} 

Pour teindre en noir le texte de 1' element d'identificateur « toto » on precisera : 

#toto { 
color: #000; 
} 

La graisse, les italiques et les obliques 

La propriete font-weight definit la graisse de caracteres. Elle accepte les valeurs : 

• normal : graisse normale. 

• bol d : gras. 

• lighter : moins gras que la reference. 



Les feuilles de styles CSS 

Deuxieme partie 

• bol der : plus gras que la reference. 

• 100, 200, ... 900: chaque valeur definit un niveau de graisse different. Ces 
valeurs ne sont malheureusement pas souvent prises en compte par les differents 
navigateurs. 

La graisse d'un caractere depend directement du type de police utilise. D'autre part, 
une grande partie des polices ne reconnaitront que les valeurs normal et bold. 
Exemple : 

.gras { 

font-weight: bold; 
} 

La propriete font-style gere les italiques et les obliques. Elle admet les valeurs : 

• normal : police droite. 

• i tal i c : specifie une police dite « italique » dans la base de donnees de polices du 
navigateur (c'est le cas de toute police dont le nom comporte l'un des mots 
« Italic », « Cursive », ou « Kursiv »). A defaut, se rabat sur une police etiquetee 
« oblique ». 

• oblique : specifie une police dite « oblique » dans la base de donnees de polices 
du navigateur (c'est le cas de toute police dont le nom comporte d'un des mots 
« Oblique », « Slanted », ou « Incline »). 

Rares sont les polices de caracteres disposant d'une variante « oblique ». 

Void un exemple d'utilisation : 

.italique { 
font-style: italic; 
} 

Caracteres soulignes, surlignes, barres, clignotants 

La propriete text-decoration permet : 

• de souligner le texte (valeur underl i ne) ; 

• de surligner le texte (valeur overl i ne) ; 

• de barrer le texte (valeur 1 i ne-th rough) ; 

• de faire clignoter le texte (valeur bl i nk). 

Internet Explorer ne reconnait pas le clignotement (blink) - on y recourra avec 
moderation, car cette propriete agresse ou gene souvent les utilisateurs. 



N0RME FACULTATIVE blink n'est pas impose 

Le W3C n'oblige pas les navigateurs a prendre en charge la fonctionnalite de clignotement. 
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On peut cumuler toutes ces fonctionnalites de decoration du texte, en precisant plu- 
sieurs valeurs a la propriete text-decoration. Le code suivant produira ainsi un titre 
souligne et surligne : 

hi { 

text-decoration: underline overline; 

} 

On recourt tres frequemment a la propriete text-decoration pour modifier le souli- 
gnement des liens hypertextes. Ainsi, pour mettre en place des liens soulignes uni- 
quement lors de leur survol par le pointeur de la souris, on pourra ecrire : 

a { 

text-decoration: none; 

} 

a: hover { 

text-decoration: underline; 

} 

La casse : minuscules et majuscules 

La casse est la prise en compte des majuscules et des minuscules des caracteres. Elle 
se traduit en CSS par la propriete heritee text-transform, qui admet quatre valeurs : 

• capitalize : seule la premiere lettre de chaque mot du texte sera affichee en 
majuscule. 

• lowercase : tout le texte sera affiche en minuscules. 

• uppercase : tout le texte sera affiche en majuscules. 

• none : le texte ne sera pas modifie. 



Heritage Remise a zero d'une valeur 

La valeur none permet d'annuler un effet text-transform applique a un ancetre de I'element con- 
sidered Cette propriete est en effet heritee par les descendants de tout element sur lequel elle porte. 



Seul l'affichage des caracteres sera ainsi modifie, le texte du document source restant 
inchange. Exemple : 

CSS 

.majuscules { 

text-transform: uppercase; 
} 
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HTML 

<p class="majuscules">toto est mon ami</p> 

Cet exemple fait afficher au navigateur le texte : « TOTO EST MON AMI ». . . meme 
si la structure de base reste en minuscules. II ne s'agit done que d'un effet visuel. 

Les styles et effets sur les mots et paragraphes 

Interlignage de texte 

L'interligne est l'espace separant deux lignes consecutives d'un paragraphe (a ne pas 
confondre avec les marges de paragraphe, qui ne portent que sur son perimetre). Les 
paragraphes et autres elements contenant du texte ont une valeur d'interligne par 
defaut qui depend des navigateurs. Elle est d'environ 1,2 em, soit un peu plus que la 
hauteur d'un caractere. 

La propriete CSS mettant en place l'interligne s'appelle line-height. Elle admet 
pour valeurs un nombre, un pourcentage, ou le mot-cle normal. Toutes les unites 
sont acceptees ; « em » est toutefois conseillee. Lexemple suivant genere ainsi un bloc 
de paragraphe de 10 caracteres de large sur fond vert et en interligne double : 

CSS 

.interligne { 
line-height: 2em; 
width: lOem; 

background-color: green; 
} 

HTML 

<p class="interligne">Test de paragraphe pour montrer la hauteur de 
l'interligne fixe a 2 em, soit le double de la hauteur de caractere. </p> 

Le crenage 

Le crenage (ou interlettrage) est la distance separant deux caracteres consecutifs. 
Toutes les balises disposent d'une valeur de crenage par defaut, qu'on peut modifier 
grace a la propriete CSS letter-spacing (une valeur negative ayant pour effet de 
resserrer les caracteres). 



La typographie et la mise en forme de caracteres 

Chapitre 5 

Par exemple : 

.ecart { 
letter-spacing: 0.4em; 

} 

. rapproch { 

letter-spacing: -3px; 

} 

L'espace entre les mots 

La propriete word-spacing regie l'espace separant deux mots consecutifs. Elle se 
comporte comme letter-spacing et admetles memes valeurs, mais ne porte que sur 
les mots entiers. Cette fonctionnalite n'est proposee par Internet Explorer qua partir 
de sa version 6. Par exemple : 

.ecart { 
word-spacing: 0.4em; 

} 

. rapproch { 

word-spacing: -3px; 

} 

Definir la justification du texte 

Trois comportements vis-a-vis des marges sont possibles pour chaque paragraphe : 
alignement a gauche, alignement a droite, justification. Cette derniere possibility, 
souvent utilisee dans les livres, se traduit par un alignement simultane sur les deux 
marges, en jouant automatiquement sur l'interlettrage et l'espace entre les mots. 

La propriete CSS definissant l'alignement de texte est text-align. Elle admet les 
valeurs left (alignement a gauche), right (alignement a droite), center (texte 
centre), justify (texte justifie) et normal (comportement par defaut). Exemple : 

CSS 

.interligne { 
text-align: justify; 
width: lOem; 

background-color: green; 
} 

HTML 

<p class="interligne">Test de paragraphe demontrant l'alignement 
justifie, c'est-a-dire colle a gauche et a droite du bloc.</p> 
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Marquer un mot avec une couleur de fond 

Vous n'avez pas manque de remarquer dans les exemples precedents la propriete 
background-color (couleur d'arriere-plan), subrepticement introduite. Nous la 
detaillerons dans le chapitre suivant, mais sachez d'ores et deja quelle permet de 
mettre en valeur un mot precis, un peu a la maniere d'un marqueur de surlignement. 

La procedure est simple, et consiste comme d'habitude a structurer d'abord le con- 
tenu. Nous traduisons l'importance de ce mot par la balise d'emphase <em> 
(emphase), a laquelle nous attribuons via CSS la couleur jaune. Par la meme occa- 
sion, nous remplacons son style italique par defaut en style normal (police droite). 

CSS 

em { 

font-style: normal; 

background-color: yellow; 

} 



HTML 

<p>Test de paragraphe montrant qu'une <em>expression importante</em> 
peut etre marquee par une simple couleur de fond.</p> 

Ces fantaisies visuelles sont bien entendu a consommer avec moderation pour ne pas 
imposer a vos visiteurs un « arbre de Noel » surcharge et du plus mauvais gout. 



La notation raccourcie 

Pour eviter l'accumulation de declarations de polices, le W3C a prevu une notation 
raccourcie des proprietes debutant par « font... ». Comme nous l'avons deja evoque 
dans le chapitre d'introduction aux feuilles de styles, il est possible de synthetiser la 
regie suivante : 

CSS 

p { 

font-family: Arial, sans-serif; 
font-style: italic; 
font-weight: bold; 
font-size: 120%; 
line-height: 140%; 
} 
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sous la forme : 



P { 

font: italic bold 120%/140% Aria! , sans-serif; 

} 

L'ordre est important : commencez par declarer les styles de police (graisse, italique), 
enchainez sur la taille (et l'eventuel interligne) pour conclure avec la ou les families 
de polices. 



Application pratique 



lllustrons les principales proprieties de mise en forme des textes et de la typogra- 
phie en proposant quatre maquettes bien distinctes pour le meme paragraphe 
(figure 5-1). 



Voici un paragraphe qui a du style ! 



VDta UN PARAGRAPI-E QUI A DU SIYLE ! 

Voici un paragraphe qui a du 
style ! 

Voici un p a ragraph e qui a du styl e ! 



Figure 5-1 Exemples de mise en forme typographique 

L'objectif est d'obtenir I'effet visuel de I'illustration a partir du code HTML 
suivant : 

HTML 

<p id="pl">Voici un paragraphe qui a du style !</p> 

<p id="p2">Voici un paragraphe qui a du style !</p> 

<p id="p3">Voici un paragraphe qui a du style !</p> 

<p id="p4">Voici un paragraphe qui a du style !</p> 
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En jouant avec les differentes proprietes (voir les annexes) et en designant chaque 
paragraphe par son identificateur (id), on pourrait ecrire : 

CSS 

#pl { 

font: 40px "times new roman", serif; 
letter-spacing: 5px; 
border-bottom: 4px solid gray; 
} 

#p2 { 

font: bold small-caps 30px "Bitstream Vera Sans", arial , sans-serif; 

letter-spacing: -4px; 

} 

#p3 { 

font: 40px monospace; 

} 

#p4 { 

font: italic 25px verdana, arial, sans-serif; 

text-decoration: line-through; 

} 
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Les bordures, 
arriere-plans et images 



Dans un document web graphique, la prise en compte de l'environnement des ele- 
ments (bordures, arriere-plans et images de fond) constitue la derniere etape majeure 
avant de passer aux positionnements d'objets en CSS a proprement parler. 



Mettre en forme les bordures 

CSS permet d'entourer tres simplement les divers elements de type bloc d'une page 
web par des bordures aux caracteristiques (style, epaisseur, couleurs) libres. 

Cette possibility est egalement offerte aux elements en ligne remplaces (vus au 
chapitre 2), qui possedent des dimensions par defaut (hauteur et largeur). C'est le cas 
de la balise <img>, par exemple. 

Les differents styles de bordures 

La propriete border-style met en place le type des bordures d'un element. Tous les 
navigateurs ne reconnaissent pas les dix styles de bordures possibles : 

• dashed : tirets ; 

• dotted : pointilles ; 
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• doubl e : deux traits pleins d'epaisseur egale et separes par un espace vide de meme 
epaisseur ; 

• groove : effet 3D grave dans la page, oppose de ridge ; 

• hidden : pas de bordure mais influe sur la bordure mitoyenne ; 

• i nset : effet entrant, element incruste dans la page (oppose d'outset) ; 

• none : pas de bordure ; equivaut a border-wi dth : ; 

• outset : effet sortant, element extrude de la page (oppose d'i nset) ; 

• ridge : effet 3D sortant de la page, oppose de groove ; 

• solid : trait plein. 



Figure 6-1 

Les differents types 
de bordures 



border-sl^le : solid 



border-style: dotted 
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bordcr-styfr: dashed 






border-style: do-ubJe 



border-s^Je: ridge 



b«rdEr-sty3E: groove 
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Chacun des quatre cotes d'un element peut aussi etre represente differemment. Pour 
cela, on precise a la suite plusieurs valeurs de border-style, dont l'interpretation 
dependra de leur nombre. 

• deux valeurs seront respectivement affectees aux cotes horizontaux et verticaux du 
cadre. Par exemple : border-style: solid dotted; 

• trois valeurs concerneront tour a tour le haut, les cotes verticaux, et le bas. Par 
exemple : border-style: solid double dotted; 

• quatre valeurs decriront les styles des quatre cotes en tournant dans le sens horaire 
haut, droit, bas, et gauche. 

Par exemple : border-style: solid double dotted ridge; 

II existe une autre possibilite : les proprietes border-top-style (haut), border- 
right-style (droit), border-bottom-style (bas) et border-left-style (gauche) 
s'appliqueront directement au style de bordure d'un cote. 
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BOGUE Internet Explorer 

Internet Explorer 6 presente un bogue de rendu visuel : les bordures d'un pixel de large dont le style est 
defini en dotted (pointilles) sont en realite affichees en style dashed (tirets) ! 
La version 7 du navigateur corrige ce bogue. 



L'epaisseur des bordures 

La propriete border-width definit l'epaisseur des bordures, et n'a de sens qu'en 
accompagnement d'un style (border-style) ou d'une couleur de bordure (border- 
color). Certains navigateurs n'interpretent d'ailleurs que les bordures ayant ren- 
seigne ces deux proprietes. 

On peut preciser les epaisseurs de plusieurs manieres (Interpretation des trois pre- 
mieres depend du navigateur) : 

• thi n : bordure fine ; 

• medium : bordure moyenne ; 

• thi ck : bordure epaisse ; 

• avec une mention numerique de longueur reprenant la syntaxe habituelle. 

La syntaxe des mentions de longueurs est exposee au chapitre 5, dans la section por- 
tant sur les unites de taille de polices. A nouveau, fournir plusieurs valeurs permettra 
de representer differemment les quatre cotes de l'element. Comme pour le style, 
l'affectation des valeurs depend de la taille de leur liste. 

• Deux valeurs portent sur les cotes horizontaux puis verticaux. 
Par exemple : border-width: 6px 2px; 

• Trois valeurs representent le haut, les cotes lateraux, et le bas. 
Par exemple : border-width: thin medium 3em; 

• Quatre valeurs definissent les cotes en partant du haut et en tournant dans le sens 
horaire. Par exemple : border-width: thin medium 3em lem; 

On peut ici encore definir directement l'epaisseur de chaque cote avec les proprietes 
border-top-width, border-right-width, border-bottom-width et border-left -width. 

La couleur des bordures 

Elle est mise en place par la propriete border-color, qui ne s' applique qu'en comple- 
ment d'un style (border-style) ou d'une epaisseur de bordure (border-width). Sans 
cela, la bordure est inexistante. 



Rappel Notation des couleurs 

Les representations de la couleur evoquees au chapitre 4, notamment les notations hexadecimales cour- 
tes, sont toujours valides dans ce contexte. 
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Rappelons que Ton peut indiquer une couleur de plusieurs manieres : 

• par son nom (en anglais). Exemple : border-color: black; pour le noir ; 

• par rgb(x,y,z) : definition de la couleur en mode RGB avec des entiers de 
a 255 ou des pourcentages. Exemple : border-color: rgb(50,2 55,80) ; 

• par son codage RGB exprime en hexadecimal, court ou long. 
Exemple : border-color: #fcO; 

Encore une fois, l'ordre d'attribution des valeurs de couleurs se fait dans le sens 
horaire en partant du haut, en les completant eventuellement par symetrie. 

• Deux valeurs definissent ainsi une couleur par orientation (horizontale ou verti- 
cale) de cote. Exemple : border-color: #fcO #ccc; 

• Trois valeurs permettent de plus de distinguer le haut du has. 
Exemple : border-color: blue green red; 

• Quatre valeurs individualisent chaque cote. 
Exemple : border-color: blue green red yellow; 

De nouveau, les proprietes border-top-color, border-right-color, border- 
bottom-color et border-left-color s'appliquent directement a un cote precis. 

Notation raccourcie 

La propriete generate border rassemble tous ces aspects en une seule instruction. 
Pour obtenir une bordure en pointilles gris large de trois pixels, il suffit ainsi d'ecrire : 

border: 3px dotted gray; 

Cela allege agreablement les specifications distinctes : 

border-width: 3px; 
border-style: dotted; 
border-color: gray; 

Applications pratiques 

Supprimer la bordure d'une image 

Vous etes probablement familier des images cliquables, notamment utiles dans les 
menus avec boutons graphiques. L'approche naive et naturelle : 

<a href="page.htm"ximg alt="" src="image. png" /></a> 
entoure malheureusement toute image servant de lien d'un cadre bleu. 
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En HTML, on peut resoudre ce probleme en precisant l'attribut border="0" : 
<a href="page.htm"ximg a"lt="" src="image. png" border="0" /></a> 

II convient pourtant, nous l'avons vu, de deporter les proprietes de mise en forme 
(telles que les details des bordures) vers les styles CSS. Le style suivant supprime la 
bordure de toutes les images du document : 

img { 

border -width : 0; 

border-style: none; 

} 

En notation raccourcie : 
img {border: none;} 

Ce style s'applique a toutes les images de la page, sans limiter son action a celles qui 
sont la source d'un lien hypertexte. 

Pour conserver les bordures sur certaines images, il suffit de remplacer le selecteur 
i mg par un selecteur de classe : 

I img. sansBordure {border: none;} 

Cette derniere declaration n'affectera que les bordures des images de la classe 
sansBordure, par exemple : 

<img class="sansBordure" a"lt="" src="image.png" /> 

De la meme maniere, on n'operera que les bordures des images contenues dans un 
lien en ecrivant la declaration : 

a img {border: none;} 

Celle-ci relevant du selecteur a img, elle ne concernera que les liens (<a>) renfermant 
des images (<i mg>), et ceci a n'importe quel niveau de profondeur (toutes les images du 
lien seront concernees, et pas uniquement les descendants directs de l'element <a>). 

Afficher un trait vertical 

Par une utilisation astucieuse des bordures, on peut encore mettre en place une ligne 
verticale dans un document. 
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L'element <hr /> {horizontal rule) est un separate ur qui trace un trait horizontal ; c'est 
une balise auto-fermante. L'absence d'element decrivant une ligne verticale incite sou- 
vent les designers a recourir a diverses « bidouilles » pour les creer. Les plus courantes 
impliquent l'ajout de colonnes de tableau ou de blocs <di v> verticaux et positionnes. 

Dans la plupart des cas, ces complications sont inutiles, et une simple bordure a 
droite ou a gauche de l'element fait 1' affaire. Pour creer un paragraphe de texte claire- 
ment separe du reste du contenu par un trait vertical, on pourra ainsi ecrire : 

CSS 

.bordure { 
width : lOem ; 

border-right: lpx solid red; 
} 



HTML 

<p class="bordure">test de paragraphe pour montrer que ce paragraphe 
sera separe visuellement du reste de la page a l'aide d'un trait 
vertical a sa droite. </p> 

Cette methode convient aussi pour marquer une separation entre un menu et le con- 
tenu de la page. La figure 6-2 presente son resultat. 



Figure 6-2 

Exemple de separation 
verticale 



test de paragraphe pour 
rnontrer que ce 
paragraphe sera separe 
visuellement du reste de la 
page a l'aide d'un trait 
vertical a sa droite. 





Arriere-plans et images de fond 

Les proprietes CSS relatives aux couleurs et images d'arriere-plan permettent de pre- 
voir une mise en page independante du document : une simple modification de la 
feuille de styles suffira a transformer l'ensemble du site. 

Image de contenu ou image d'arriere-plan ? 

Le principe de separer le contenu de la presentation est enthousiasmant : changer 
l'aspect complet de toutes les pages en n'agissant que sur la feuille de styles represents 
un gain de temps considerable. 
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Le meilleur exemple de ce principe reste le celebrissime « Zen Garden » 
(http://www.csszengarden.com), qui propose en un clic de choisir parmi des centaines 
d'habillages differents tout en conservant exactement la meme structure, c'est-a-dire 
le meme document HTML. Ce type de prouesses est possible en CSS, en appliquant 
differentes images de la charte graphique en arriere-plan des elements. 

Ne versons pas pour autant dans l'exces inverse : les styles CSS doivent definir uni- 
quement la presentation du document, sans se preoccuper des elements de contenu. 
Toutes les images ne relevent pas de la presentation et de la mise en page : certaines 
sont essentielles a la navigation ou a la comprehension du document. 

Ainsi, les photographies d'un organigramme, partie integrante du contenu de la 
page, sortent du cadre de CSS. II en va de meme pour un menu graphique depourvu 
de solution de remplacement en mode texte (pour des raisons d'accessibilite, on 
prendra garde de fournir de telles alternatives aussi souvent que possible). 



A RETENIR Bonnes habitudes de travail 

Pour etre sur de ne pas exagerer I'emploi des styles dans votre presentation, visualisez vos pages web en 
desactivant CSS (ce que permettent les navigateurs modernes comme Firefox de Mozilla). Vous garanti- 
rez ainsi une structure bien concue ou chaque visiteur pourra aisement naviguer. 
Cette habitude est un principe de developpement general, a suivre des le debut d'une conception web. 
La structure du fichier HTML sera propre et fonctionnelle sans styles, scripts ni mise en page particuliere : 
un document web doit toujours etre consumable sans mise en forme (CSS), scripts ou plug-ins. 
N'hesitez pas a employer un lecteur en mode texte pour varier encore les conditions d'observation de 
votre site, et garantir sa bonne interoperability. 



Afficher une couleur de fond 

Tous les elements HTML peuvent beneficier d'une couleur de fond, notion abordee 
dans le chapitre 5, traitant de typographic et mise en place par la propriete background- 
col o r. Sa valeur n'est pas heritee mais les fonds etant par defaut « transparents », les ele- 
ments imbriques apparaitront de la meme couleur que leur parent. 

On precisera les couleurs comme pour la propriete border-color : toutes les nota- 
tions introduites dans le chapitre 4 sont autorisees. Par exemple : 



div#global {background-color: #ffcOcO;} 



Inserer une image d'arriere-plan 

La propriete background-image associe une image de fond a l'element sur lequel elle 
porte. Pour mettre en place une image d'arriere-plan valable pour tout le document, 
on la placera sous la balise <body>. 
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Par defaut, cette image sera repetee en damier (ou papier peint) a partir du coin 
superieur gauche. On peut toutefois modifier ce comportement en jouant sur les 
autres attributs CSS de la propriete background. 

A nouveau, l'absence d'un mecanisme d'heritage a peu d'impact : le comportement 
par defaut etant l'absence de tout fond, les elements imbriques apparaitront comme 
ceux de leurs parents. 

Deuxvaleurs sont possibles : none et url (chemin-vers-1 ' image). Voici des exemples : 

div#g"lobal {background-image: url (dossier/fond. jpg) ; } 

div#g"lobal { background- image: url (http://www.monsite.com/dossier/ 

fond.jpg) ;} 

Soulignons l'absence inhabituelle d'apostrophes simples ou doubles autour des noms 
des images. 



ASTUCE Contourner un bogue de Netscape Navigator 

Les versions 4 et 6 de Netscape Navigator peuvent poser des problemes d'affichage lors de I'imbrication 

de tableaux, et repeter un arriere-plan dans les cellules des tableaux imbriques. 

On corrige ce bogue en specifiant un arriere-plan sans image dans les eventuelles cellules concemees. 



Positionner I'image a sa convenance 

Avec background-position, on pourra placer dans un element une image d'arriere- 
plan definie par background-image. Cet attribut s'utilise surtout en l'absence de 
repetition (background- repeat). 

La premiere valeur (exprimee de maniere absolue par une longueur ou relative par un 
pourcentage) specifie la position horizontale par rapport au bord gauche. L'even- 
tuelle deuxieme valeur (demarquee de la premiere par un blanc) portera sur la posi- 
tion verticale (par rapport au bord superieur). En son absence, c'est la valeur par 
defaut center (ou 50%) qui prendra effet. Voici quelques regies : 

• les nombres negatifs sont autorises ; 

• il est interdit de meler valeurs relatives et absolues (dans le cas des positions) ; 

• les valeurs relatives sont des pourcentages calcules par rapport aux dimensions de 
I'image. 

En somme, ces deux valeurs placent le coin superieur gauche de I'image dans 
l'espace. Pour memoire les correspondances sont : 

• 0% 0% = left top 

• 50% 50%= center center 

• 100% 100%= right bottom 
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Par exemple (illustre figure 6-3) : 

div#global { 
width: 300px; 
height: 200px; 
background-color: yellow; 
background-image: url (dossier/fond. jpg) ; 
background-repeat: no-repeat ; 
background-position: right top; 
} 



Figure 6-3 

Positionner une image 
d'arriere-plan 




Repeter I'image ou non 

Par defaut, toute image d'arriere-plan se repete comme une mosaique en emplissant 
l'espace de l'element qui la contient. La propriete background-repeat permet de 
modifier ce comportement et reconnait pour cela quatre valeurs : 

• repeat : c'est la valeur et le comportement par defaut, ou I'image se repete sur les 
deux axes. 

• no- repeat : I'image n'apparait qu'une fois, sans repetition. 

• repeat-x : I'image ne se repete que dans le sens horizontal (exemple : frise). 

• repeat -y : I'image ne se repete que dans le sens vertical (exemple : bordure gra- 
phique verticale ou marge). 

Par exemple : 

body { 

background-image: url (frise. jpg) ; 

background-repeat: repeat-x; 

background-position: top; 

} 
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Fixer I'image par rapport au contenu 

Une image d'arriere-plan accompagne par defaut son element si celui-ci est deplace 
dans une barre d'ascenseur (scroll). On peut toutefois la fixer par rapport a la fenetre 
du navigateur avec la propriete background-attachment. 

Pour mieux comprendre le principe, il suffit d'appliquer une image de fond au docu- 
ment entier : 

body { 

background-image: url (image. jpg) ; 

background-repeat: no-repeat; 

background-position: center right; 

} 

Placez a present dans ce document un tres long texte pour servir d'exemple (un site 
web en propose a cet effet : http://www.lipsum.com). Le texte d'exemple ne tenant pas 
sur la fenetre, une barre d'ascenseur apparait sur la droite. Deplacer cet ascenseur 
provoque le comportement par defaut de I'image de fond : elle accompagne le mou- 
vement jusqu'a sortir completement du champ. 

Ajoutons a present la declaration suivante a 1' element body : 



I background-attachment: fixed; 



L'image n'est plus attachee au contenu, mais a la fenetre. Elle reste en place, quelle 
que soit la position de l'ascenseur. C'est done une propriete tres interessante pour 
placer certains elements de mise en page devant rester figes quel que soit le contenu 
du document (par exemple, des logos). 



Notation raccourcie 

Une notation abregee permet ici encore d'alleger les suites de declarations sembla- 
bles. La propriete background reunit toutes les caracteristiques d'arriere-plan decrites 
dans ce chapitre. 

Ce qui en notation classique s'ecrit : 

body { 

background-color: white; 
background-image: url (image. jpg) ; 
background-repeat: no-repeat; 
background-position: center right; 
background-attachment: scroll; 
} 
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se resumera comme suit en notation raccourcie : 

body { 

background: white url (image. jpg) center right no-repeat scroll; 

} 



Application pratique 



Reprenons notre fil rouge: le projet de site touristique alsacien. Rappelons le 
code HTML : 

HTML 

<body> 

<ul id="menu"> 

<lixa href="#">Retour a 1 'accuei"l</ax/"li> 

<lixa href="#">Presentation de la region</ax/li> 

<lixa href="#">Historique de 1 'Alsace</ax/li> 

<lixa href="#">Castronomie local e</ax/li> 

<lixa href="#">H6tels et gites</ax/li> 

<lixa href="#">Photographies</ax/li> 

</ul> 

<hlxa href="photos.htm" title="photos d'Alsace">Bienvenue en Alsace 

</ax/hl> 

<h2>Une belle region francaise</h2> 

<p>[Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos. htm" title="lien vers des photos d'Alsace"> 

<img src="image. png" alt="photographie" /x/ax/p> 

<h2>Un patrimoine considerable</h2> 

<p>[Paragraphe associe a cet autre sous-titre de niveau 2.]</p> 

<p id="pied">Pied de page et <a href="?">Mentions legal es</ax/p> 

</body> 

Voici quelques idees pour en agrementer la structure avec bordures et arriere- 
plans : 

1 Placer une discrete image d'arriere-plan derriere le titre principal. 

2 Souligner les titres de niveau 2 par une bordure basse bleue d'une epais- 
seur de 2px 

3 Donner une couleur de fond jaune au pied de page et le separer du reste 
du contenu avec un trait horizontal bleu epais d'un pixel. 
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Reponses 

O Le titre principal correspond a I'element <hl>. Une image de fond y sera pre- 
cisee par la propriete background, comprenant dans I'ordre le chemin, la posi- 
tion et le mode de repetition de I'image. La regie suivante orne le titre d'un 
arriere-plan repete et ancre en haut a gauche : 

hi { 

background : url (image. png) left top ; /* inutile de preciser la 

valeur repeat car c'est la valeur par defaut */ 

} 

Nous appliquerons aux elements <h2> la propriete raccourcie border-bottom : 

h2 { 

border-bottom : 2px solid blue ; 

} 

Pour prevoir un peu d'espace entre le texte du titre et sa bordure, on pourra 
preciser une valeur de marge interne (paddi ng) : 

h2 { 

border-bottom : 2px solid blue ; 

padding-bottom : 5px ; 

} 

Q Une telle separation visuelle n'est qu'une bordure fine, qu'on applique au pied 
de page en selectionnant son identificateur (pied) : 

#pied { 

border-top : lpx solid blue; 

} 

La propriete background-color, ou son raccourci background, en definit la cou- 
leur de fond : 

#pied { 

border-top : lpx solid blue; 

background: yellow ; 

} 

Pour aerer le texte et le decoller de la bordure, c'est a nouveau un padding 
qu'on met en place : 

#pied { 

border-top : lpx solid blue; 
background: yellow ; 
padding-top: 2px ; 

} 
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Le positionnement en CSS 



II est temps d'entrer dans le vif du sujet : le placement des objets d'un document web 
en constitue souvent la charpente. Nous expliquerons par etapes les bases du posi- 
tionnement CSS, pour lesquelles il est necessaire de bien comprendre le « modele de 
boite » normalise par le W3C. 



Introduction au positionnement en CSS 

L'arrivee de CSS 2 a generalise le recours aux feuilles de styles. Celles-ci proposent 
des mises en page bien plus souples que les antiques methodes a base de tableaux. 
Contrairement aux cellules de ces derniers, necessairement adjacentes, les elements 
HTML styles en CSS peuvent facilement etre places n'importe ou. 

Signalons un autre avantage de taille : la notion de profondeur. CSS travaille sur diffe- 
rents niveaux de profondeur qui se superposent a la maniere de couches transparentes. 
On les appelle souvent caiques. Cette technique ouvre une nouvelle dimension au 
designer : il peut prendre du recul pour apprehender l'interaction des elements. Libere 
des contraintes des mises en page a plat, de nouvelles manieres de raisonner lui sont 
accessibles : cette image n'est pas incrustee dans le design mais le survole ; cet arriere- 
plan ne fait pas partie du menu mais releve d'un autre niveau de profondeur, etc. Toute 
la difference est la : les objets ne sont pas juxtaposes, mais bien souvent superposes. 
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Simplification Caiques et CSS 

Apparu en 1997, le terme caique designait d'abord une balise proprietaire de Netscape Navigator: 
<layer> (bloc transparent susceptible d'etre superpose a d'autres caiques). Rapidement, on a qualifie 
de caiques les elements <div> et <span>, souvent utilises a contre-emploi. Cette confusion perturbe 
les webmasters debutants. 

Les feuilles de styles CSS permettant de positionner et de superposer tout element, il n'y a plus besoin de 
reserver une balise precise a la fonction de caique. 



Comprendre le modele de bolte 



En HTML, matiere premiere de CSS, chaque element est considere comme une 
boite (voir figure 7-1). En effet, aux dimensions induites par leur contenu s'ajoutent 
souvent les espaces de marges externes (margi n) ou internes (paddi ng) et une bordure 
(border). 



Figure 7-1 

Le schema de boite 
en HTML 




Ces trois perimetres ne sont pas obligatoires. Non renseignes, ils prendront la valeur 
par defaut, toujours nulle pour les elements en ligne. 

En revanche, parmi les elements de type bloc, seul <div> n'a pas de marges par 
defaut. On peut s'en rendre compte en creant deux boites de paragraphes : 

HTML 

<p>premier paragraphe de texte</p> 
<p>second paragraphe de texte</p> 

Ils s'affichent l'un sous 1' autre, comportement normal des elements de type bloc. 
L'espace les separant correspond a leurs marges externes (non nulles). Pour y reme- 
dier, il suffit de supprimer les marges externes de la balise concernee : 
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CSS 

I p {margin: 0;} 

Tenir compte des marges et paddings par defaut des elements de type bloc vous epar- 
gnera des soucis ou decalages involontaires avec des balises comme <hl>, <h2>... 
<h6>, <u"1>, <b1ockquote>, etc. 

Les dimensions des boltes 

La largeur et la hauteur d'une boite sont calculees en ajoutant celles du contenu aux 
dimensions des marges internes et a l'epaisseur de la bordure. 

Ainsi, la largeur totale d'un element prendra en compte la largeur du contenu 
(width), les marges internes gauche et droite, et les epaisseurs des bordures gauche et 
droite. II en va de meme pour la hauteur (hei ght). 

Comme le montre la figure 7-2, un element dont le contenu s'etend sur 250 pixels de 
large et arborant des marges internes (padding) laterales de 20 pixels et des bordures 
laterales de 5 pixels occupera a l'ecran une largeur totale de : 250 + 20 + 20 + 5 + 5 = 
300 pixels. 



Figure 7-2 

Dimension de boite 
standard en HTML 




300px 



Differents modeles de boltes 

Le navigateur Internet Explorer (dans ses versions 5 et, sous certaines conditions, 6) 
interprete differemment les dimensions des boites. Son editeur (Microsoft) se fonde 
sur un modele non conforme aux recommandations du W3C, et considere pour sa part 
que le remplissage et les bordures relevent de la zone de contenu (voir figure 7-3). Dans 
ces conditions, la largeur apparente d'une boite sera identique a la largeur specifiee pour 
son contenu. 
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Figure 7-3 

Differentes interpreta- 
tions des boites selon 
les navigateurs 



Boite standard : width 250 px 

Margin 



Padding 
Contenu 



Border 



Largeur a I'ecran : width + padding + border 



Boite Microsoft : width 250px 

Margin 



I PaddinQ 
I Contenu 



Border 




Largeur a I'ecran : width 



La boite evoquee plus haut n'occupera alors a I'ecran qu'une largeur de 250 pixels. Sa 
zone de contenu se trouvera done amputee des epaisseurs de bordures et de remplis- 
sages, correspondant ici a une difference de 50 pixels par rapport au modele standard. 

Ces differences peuvent avoir des effets spectaculaires sur le document final. Le site 
Openweb detaille davantage ce probleme courant : 
► http://openweb.eu.org/articles/dimensions_boites_css/ 

Certaines differences d'affichage entre Internet Explorer et d'autres navigateurs plus con- 
formes s'expliquent ainsi, les decalages se cumulant d'epaisseur de bordure en epaisseur de 
padding. Pour eviter nombre de ces ennuis de dimensions, on evitera par consequent : 
• d'attribuer une largeur explicite (width) a un element dote de marges internes 
(padding) ou de bordures laterales ; 
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• d'attribuer une hauteur explicite (height) a un element dote de marges internes 
(padding) ou de bordures horizontales. 

On preferera dans les deux cas recourir aux marges externes (margin). 



Internet Explorer Mode d'affichage 

Le modele de botte errone de Microsoft se nomme « mode Quirks ». II conceme par defaut toutes les ver- 
sions d'lnternet Explorer inferieures a 6. Depuis IE6, il est possible de choisir son mode d'affichage : 
« standard » ou « quirks ». Voici les differents cas ou Internet Explorer passe en mode « quirks » : 

• une page HTML sans doctype (done non valide) ; 

• une page HTML avec un doctype tronque ou mal redige ; 

• une page HTML avec une DTD d'une version de HTML inferieure a 4 ; 

• une page avec un doctype XHTML precede du prologue XML (prologue inutile pour une page xhtml 
servie en text/html). 

II est bien evidemment recommande de se conformer au mode d'affichage standard afin de faciliter la 

compatibilite naturelle de vos documents. 

Notons enfin que la version IE7 ne passe plus en mode « quirks » dans le dernier cas cite. 



Considerons maitenant un bloc large de 150 pixels qu'on souhaite ecarter du reste du 
document par 20 pixels a droite. Recourir pour cela a la propriete padding-right 
posera des problemes de modele de boite. II convient de preferer a une telle marge 
interne la propriete margin-right. Une autre solution consiste a conserver le pad- 
ding, mais a n'expliciter aucune largeur pour le bloc (on pourra contraindre sa taille 
en la limitant par des marges). Voici le code initial : 

HTML 

<div> 

<p>paragraphe de contenu</p> 

</div> 



CSS 

div { 

width: 150px; 

padding-right: 20px; 

} 

C'est 1' archetype du probleme de compatibilite provoque par differentes interpreta- 
tions du modele de boite. Tous les autres navigateurs, interpretant correctement la 
norme, reserveront a un tel bloc un espace de 170 px. Seul Internet Explorer, en 
mode « quirks », se distinguera en lui attribuant une taille de 150 px. 
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Un peu de bugware (reaction de compromis face a une erreur d'un tiers) est prefe- 
rable a des techniques de contournement plus complexes. On ecrira done : 

CSS 

div { 

width: 150px; 

} 

div p { 

margin-right: 20px; 

} 

Cela produit l'effet escompte au prix de devoir specifier une marge pour chaque ele- 
ment contenu dans le bloc. On pourrait pour cela exploiter un (autre) bogue 
d'Internet Explorer et recourir au pseudo-element : first-child. Non reconnu par 
IE6 (mais implemente sur IE7), ce pseudo-element design era dans les autres naviga- 
teurs tous les enfants directs de l'element <div>. 



Elements ancetres, parents, enfants et freres 

Chaque boite peut en contenir d'autres. Un paragraphe <p> peut ainsi renfermer des 
boites definies par les elements <span> ou <strong>, et se trouver lui-meme inclus 
dans un element <div>. 

Toutes ces imbrications de boites forment une hierarchie arborescente entierement 
comprise dans la boite de l'element racine du document (<body>). II est essentiel de 
comprendre cette arborescence pour bien utiliser les positionnements. 

Tout document HTML est compose de conteneurs (boites en renfermant d'autres), 
sur lesquels la hierarchie du document induit une genealogie. 

• Un element directement contenu dans un autre est considere comme son 
« enfant » (le contenant s'appelle le « parent »). Les elements de liste <1i> sont 
ainsi enfants d'un element <u"l> ou <o"l> ; un <div> contenant directement un 
paragraphe <p> en est le parent. 

• Les termes familiaux habituels s'en deduisent : un bloc <div> sera l'« ancetre » de 
tout element en ligne (<strong> ou <em>) compris dans ses paragraphes enfants. 
Un parent est un ancetre de premier niveau. Lensemble de la lignee ascendante 
d'un element, qui aboutit a la racine du document, constitue aussi celui de ses 
ancetres. 

• Les elements partageant le meme parent sont logiquement appeles « freres ». 



Le positionnement en CSS 

Chapitre 7 



L'exemple suivant illustrera ces propos : 



<div> 

<hl>Quel joli tit re evocateur</hl> 

<p>Un petit texte en rapport avec le titre principa"l</p> 

<h2>Un sous-titre interessant</h2> 

<p>Un second paragraphe avec des <em>mots importants</em>.</p> 

</div> 

On en deduit une hierarchie simple : 

• Le bloc <div> est parent des titres <hl>, <h2> et des deux paragraphes <p>. C'est 
aussi un ancetre de 1' element <em>. 

• Le second bloc <p> est parent de 1' element <em>. 

• Les titres <hl>, <h2> et les deux paragraphes <p> sont freres. 

Cette hierarchie structurante permet une mise en page plus fine. On ecrira de meme 
les feuilles de styles de maniere hierarchique. Elle presente un autre avantage : un 
document bien hierarchise doit s'afficher de maniere tout a fait lisible et fonction- 
nelle, meme en 1' absence de styles CSS (et done de mise en page) - par exemple s'ils 
sont desactives. 



Comprendre la notion de flux du document 



Les differents elements d'une page, emboites ou juxtaposes selon qu'ils sont respecti- 
vement parents et enfants ou freres, prennent par defaut place dans le « flux courant » 
du document, aussi appele « flux normal ». II correspond a l'ordre dans lequel les 
boites apparaissent dans le texte, qui est aussi celui de leurs balises dans le code 
HTML. C'est le cas pour tous les documents HTML, qu'ils soient ecrits manuelle- 
ment ou generes automatiquement. 

L'ordre du flux courant intervient dans l'affichage par defaut, sans styles, sans mise 
en page ni positionnement particulier, mais certaines proprietes CSS permettent de 
« sortir » des elements du flux courant pour les positionner de facon personnalisee. 

Dans le flux courant, deux paragraphes (balises de type bloc) s'afficheront par defaut 
l'un sous l'autre. Adopter un positionnement absolu ou fiottant permettra d'extraire 
l'un d'eux du flux (disons, le second) pour l'afficher ailleurs, par exemple a cote du 
premier. 
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Positionner les elements en CSS 



Positionner dans le flux courant 

Void le comportement et le placement specifiques des elements dans le flux normal : 

• Les elements de type bloc se succedent verticalement, chaque nouveau bloc se 
placant sous le bloc frere precedent. Les blocs occupent toute la largeur disponible 
dans leur conteneur. 

• Les elements en ligne se suivent sur la meme ligne, chaque nouvel element se pla- 
cant directement a la suite du precedent, avec retour a la ligne quand il n'y a plus 
de place dans le conteneur. 

Par defaut, chaque element est done dependant de ses freres immediats, et deux 
paragraphes <p> successifs apparaissent Fun sous 1' autre. 

Cette methode, appelee positionnement dans le flux courant, convient a la majorite 
des cas : il suffit simplement de definir les marges de chaque element pour le placer 
dans son conteneur. 

Examinons le cas d'un paragraphe contenu dans un bloc <ch'v> : 
<divxp>paragraphe de texte</px/div> 

Attribuons des couleurs de fond differentes au conteneur et au paragraphe pour 
mieux les distinguer (figure 7-4) : 

div { 

background: yellow; 

} 

P { 

background: green; 

} 



Figure 7-4 

Positionnement 
dans le flux (I) 



paragraphe de texte 



Le <di v> conteneur jaune n'est pas visible ; seul le paragraphe vert apparait. II occupe 
toute la largeur disponible, e'est-a-dire la largeur du document. 

C'est un comportement logique : l'element bloc <div>, sans specification de taille, 
occupe toute la largeur possible dans une hauteur par defaut nulle. L'element bloc 
<p>, sans specification de taille, occupe lui aussi toute la largeur de son conteneur, le 
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bloc <ch'v>. La hauteur de ce dernier est determined par celle de son contenu (le 
paragraphe) car l'element <di v> n'a pas de marges internes par defaut. 

En d'autres termes, le paragraphe <p> occupe toute la largeur du bloc <ch'v> en eti- 
rant celui-ci dans le sens de la hauteur. 

Appliquons a present des dimensions a ces deux elements (figure 7-5) : 

div { 

width: 300px; 

background: yellow; 

} 

P { 

width: lOOpx; 

background: green; 

} 



Figure 7-5 

Positionnement 
dans le flux (II) 



paragraphe de 
texte 



A present pourvus de dimensions explicites, ces deux blocs se distinguent nettement. 
II reste a placer le paragraphe dans son conteneur, ce qu'on peut realiser en le laissant 
dans le flux mais en precisant des marges en haut et a gauche. 

Decalons ce paragraphe de deux caracteres (2em) en haut et de trois caracteres (3em) a 
gauche (figure 7-6) : 

div { 

width: 300px; 

padding-top: 2em; 

background: yellow; 

} 

P { 

margin-left: 3em; 
width: lOOpx; 
background: green; 
} 



Figure 7-6 

Positionnement 
dans le flux (III) 
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Voila qui suffit a positionner le bloc paragraphe dans son conteneur. Toute autre 
methode de specification de longueur que les unites em conviendrait parfaitement : 
pixel, pourcentage, etc. 

Ajoutons un deuxieme paragraphe de texte pour en observer le positionnement dans 
le flux : 

<div> 

<p id='premier'>premier paragraphe de texte</p> 

<p id=' second '>deuxi erne paragraphe de texte</p> 

</div> 

Ces deux freres prennent par defaut place l'un sous 1' autre, en respectant tous deux 
les styles CSS associes au selecteur de paragraphe (<p>) : chacun adopte une marge a 
gauche de trois caracteres (figure 7-7). 



Figure 7-7 

Positionnement 
dans le flux (IV) 



premier 
paragraphe de 
texte 



deusderri! 
paragraph 



I 

)he de 



Qyelques modifications des dimensions, marges et couleurs produisent la figure 7-8. 

div { 

width: 300px; 

padding-top: lOpx; 

background: yellow; 

} 

p#premier { 
margin-top: 0; 
margin-left: 3em; 
width: lOOpx; 
background: orange; 
} 

p#second { 
margin-top: 0; 
margin-left: 2em; 
width: 150px; 
background: green; 
} 
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Figure 7-8 

Positionnement 
dans le flux (V) 



premier 
paragraphe de 
teste 




deuKierne paragraphe de 
texte 





Malgre sa marge haute nulle, le second paragraphe n'est pas accole au premier. 
Comme nous l'avons expose en debut de chapitre, c'est parce que toutes les balises de 
type bloc (a l'exception de l'element <di v>) possedent par defaut des marges internes 
et externes. 

Les deux freres sont ici separes par la marge inferieure (margin-bottom) du premier 
paragraphe. En lui precisant une marge inferieure nulle (margin -bottom: 0), on 
obtiendra l'effet recherche : 

p#premier { 
margin-bottom: 0; 
margin-top: Opx; 
margin-left: 3em; 
width: lOOpx; 
background: orange; 
} 



Le positionnement relatif 

C'est une variante du positionnement dans le flux courant, qu'on active par la decla- 
ration position: relative;. L'element concerne est alors dit « positionne », et 
prend d'abord sa place dans le flux courant. II peut ensuite s'en decaler a l'aide des 
proprietes top, right, bottom et left. 

Reprenons l'exemple precedent en recourant au positionnement relatif pour decaler 
le second paragraphe de sa position normale dans le flux. Pour le pousser de 20 px a 
droite et de 15 px vers le haut, on lui specifie d'abord position: relative puis les 
mouvements left: 20px et bottom: 15px (figure 7-9) : 

p#second { 
position: relative; 
left: 20px; 
bottom: 15px; 
margin-top: 0; 
margin-left: 3em; 
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width: 150px; 
height: 50px; 
background: green; 
} 



Figure 7-9 

Positionnement relatif 



premier 
paragraphe de 

tex1 deuKierne paragraph 



20 pel 




15pK I 



Cet exemple illustre l'apport du positionnement relatif, ou un element peut prendre 
place par-dessus des elements freres. C'est toutefois une technique a manier avec 
precaution : on n'y manipule que des decalages, chaque element restant dependant de 
ses freres. 



MlSE EN PAGE Impact du positionnement relatif 

L'application du positionnement relatif a un element n'affecte pas les boTtes qui I'entourent ; sa place 
reservee est celle du positionnement dans le flux normal. 



Les techniques classiques de positionnement par marges repondent a la majorite des 
besoins. Le positionnement relatif n'est vraiment necessaire que pour des decalages 
avec superposition. Un element « positionne » (ici, en relatif) presente aussi des inte- 
rets pour les positionnements absolu et fixe. Positionner un element lui permet de 
devenir conteneur d'autres elements de contenu positionnes. 



Les positionnements absolu et fixe 

lis s'appliquent a tout element dote des declarations position: absolute ou 
position: fixed, qui sort alors du flux pour devenir « positionne ». Les boites ainsi 
retirees du flux normal n'ont plus aucun effet sur le calcul des placements des autres 
elements de la meme fratrie, et on determine leur position par les proprietes top, 
right, bottom et left. 

Ces dernieres s'interpretent comme en positionnement relatif et correspondent a des 
decalages. Toutefois, la position de base est calculee par rapport a un bloc conteneur et 
non pas en decalage de la position theorique dans le flux normal. Le boite conteneur de 
reference est celle du premier element ancetre positionne (en relatif, fixe ou absolu). 
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Le positionnement absolu 

Un element positionne en absolu est done place par rapport a son parent si ce dernier 
est lui-meme positionne, et sinon par rapport au premier ancetre positionne, en 
remontant au besoin jusqu'a la page entiere (element <body>). Ce principe funda- 
mental distingue le positionnement absolu du placement dans le flux : 

• Un element positionne dans le flux (en non absolu) prend pour conteneur son 
parent le plus proche. Sa position depend alors de ses propres marges et du 
padding de son conteneur. 

• Un element positionne en absolu se reporte au premier ancetre positionne, qui 
joue alors le role de conteneur. 

Illustrons cette distinction en reprenant l'exemple des deux paragraphes en flux : 

<div> 

<p id="premier">premier paragraphe de texte</p> 

<p id="second">deuxieme paragraphe de texte</p> 

</div> 

auxquels nous appliquerons les styles suivants : 

div { 

width: 300px; 

height: 200px; 

background: yellow; 

} 

p#premier { 
width: lOOpx; 
background: orange; 
} 

p#second { 
width: 150px; 
background: green; 
} 

Les deux paragraphes s'affichent dans le flux courant, le bloc vert a la suite de son 
frere orange. La boite de leur parent div leur tient lieu de conteneur global. 

Ajouter la declaration CSS suivante pour eviter un cas de fusion de marges : 

P { 
margin: 0; 

} 
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Positionnons absolument le second paragraphe en top : et 1 eft : 

p#second { 
position: absolute; 
top: 0; 
left: 0; 

width: 150px; 
height: 50px; 
background: green; 
} 



Figure 7-10 

Positionnement 
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La figure 7-10 illustre le resultat : le second paragraphe prend place en haut a gauche 
du document, sortant meme de la boite de son parent le bloc <div>. En remplacant 
la regie left: par right: 0, on obtient la figure 7-11. 

p#second { 
position: absolute; 
top: 0; 
right: 0; 
width: 150px; 
height: 50px; 
background: green; 
} 



Figure 7-1 1 
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II est clair que le second paragraphe ne se place pas en fonction de son parent direct 
le bloc <ch'v>, mais par rapport aux extremites du document entier. En effet, un bloc 
absolu se place selon le premier ancetre positionne, quitte a remonter jusqu'a la racine 
du document (l'element <body>), toujours considered comme positionnee. 

Pour placer le second paragraphe par rapport au bloc <di v>, il suffit de positionner ce 
dernier avec une propriete position (en absolu, relatif ou fixe) : 

div { 

position: relative; 

width: 300px; 
height: 200px; 
background: yellow; 
} 

La figure 7-12 represente l'effet ainsi obtenu. 



Figure 7-12 
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Les proprietes top, right, bottom et left n'ont de sens qu'appliquees a un element 
positionne. Elles n'auront aucun effet sur les elements places en flux ou flottants. 



PRIORITES Quelles proprietes I'emportent ? 

Pour un element donne, les proprietes top et bottom sont mutuellement exclusives (top ayant la 
priorite). De meme, on ne peut preciser simultanement left et right (cette derniere propriete serait 
alors ignoree). 



Tout element positionne en absolu est considere de type bloc. Les elements en ligne 
peuvent ainsi recevoir des dimensions et des bordures. 

Le positionnement fixe 

C'est un cas particulier du positionnement absolu, ou l'element reste fixe dans la 
page, par rapport a la zone de visualisation : il ne se deplace pas lors du defilement de 
cette derniere. 
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On peut rapprocher cette technique de la propriete background-attachment pour 
une image. Elle permet de simuler le comportement des cadres (frames) sans en avoir 
les inconvenients en terme d'accessibilite et de lourdeur de structure... mais ce nest 
pas une methode utile pour les mises en pages avec cadres. 

Malheureusement, elle n'est pas prise en charge par le navigateur Internet Explorer 
jusqu'a sa version 6. IE7 corrige enfin cette lacune. 



Etudes Simulations de positionnement fixe 

De nombreux designers et specialistes des styles CSS se sont penches sur ces problemes d'interpretation 

du positionnement fixe. Les liens suivants proposent des solutions de remplacement emulant cette fonc- 

tionnalite sur Internet Explorer : 

http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm 

http://www.nanoum.net/blog/6_absolue_et_fixe.html 

http://devnull.tagsoup.com/fixed/ 

http://limpid.nl/lab/css/fixed/ 



La profondeur : z-index 

En positionnant des elements, on peut superposer differents blocs. Ceci ouvre une 
troisieme dimension : celle de la profondeur. 

Par defaut, le dernier element positionne declare dans le code HTML s'affichera 
par-dessus tous les autres elements du meme conteneur. La propriete z-index 
permet de changer de comportement. Dans un meme conteneur, I'element place au- 
dessus des autres sera I'element positionne portant le plus grand z-i ndex. 

Positionnons absolument les deux paragraphes desormais familiers dans leur conte- 
neur <div> (figure 7-13) : 

div { 

position: relative; 

width: 300px; 

height: 200px; 

background: yellow; 

} 

p#premier { 
position: absolute; 
top: 0; 
left: 0; 
width: lOOpx; 
background: #ccc; 
} 
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p#second { 
position: absolute; 
top: 40px; 
left: 50px; 
width: 150px; 
background: green; 
} 



Figure 7-13 
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Comme attendu, le second paragraphe surplombe en partie le premier (ceci indepen- 
damment de l'ordre de leur declaration dans le code HTML). 

Pour le faire passer dessous, il suffit de definir pour chaque boite un niveau de 
z-i ndex different, en attribuant au premier paragraphe une valeur plus elevee : 

p#premier { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 10; 
width: lOOpx; 
background: #ccc; 
} 

p#second { 
position: absolute; 
top: 40px; 
left: 50px; 
z-index: 0; 
width: 150px; 
background: green; 
} 



Les feuilles de styles CSS 

Deuxieme partie 



Les valeurs de z-index n'ont aucune interpretation en absolu. Seule compte leur 
comparaison, 1' element de valeur la plus elevee prenant place au sommet des zones de 
superposition (figure 7-14). 



Figure 7-14 
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N'abusez pas de ces changements de profondeur : elles sont rarement necessaires 
dans un document bien construit et dote d'une structure HTML coherente. 



Le positionnement flottant 

On positionne un element en flottant avec une declaration float: left ou float: 
right. II est alors retire du flux normal pour prendre place a gauche (respectivement 
a droite) du bloc qui le contient : c'est devenu un « flottant ». Lelement qui le suit 
s'ecoulera alors dans l'espace ainsi laisse libre, en epousant sa forme. 

Pour mettre cet effet en evidence, il faut allonger le second paragraphe de l'exemple 
precedent et l'autoriser a occuper toute la largeur disponible : 

<div> 

<p id="premier">premier paragraphe de texte</p> 

<p id="second">deuxieme paragraphe de texte deuxieme paragraphe de texte 

deuxieme paragraphe de texte deuxieme paragraphe de texte deuxieme 

paragraphe de texte </p> 

</div> 

Avec les styles : 

div { 

width: 300px; 

height: 200px; 

background: yellow; 

} 
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p#premier { 
width: lOOpx; 
background: orange; 
} 

p#second { 
background: green; 
} 

Les paragraphes fonctionnent encore en flux et s'affichent l'un sous 1' autre. Le pre- 
mier a une largeur limitee et le second occupe tout l'espace du conteneur <div> 
(figure 7-15). 
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Le decor est plante : appliquer la propriete fl oat : 
duira le resultat de la figure 7-16. 



right au premier paragraphe pro- 
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Le premier paragraphe une fois pousse a droite du conteneur, la suite obeit au flux 
normal : elle commence au debut du conteneur mais s'ecoule autour du bloc flottant. 
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Un des nombreux avantages du positionnement flottant est la possibilite de placer 
des blocs cote a cote. Transformer les deux paragraphes de l'exemple en flottants les 
fait ainsi apparaitre au meme niveau (figure 7-17) : 

p#premier { 
float: left; 
width: lOOpx; 
background: #ccc; 
} 

p#second { 
float: left; 
width: 150px; 
background: green; 
} 



Figure 7-17 
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Les deux paragraphes se trouvant desormais hors du flux normal, le bloc <div> est 
vide de tout contenu. Pour l'instant, il a recu une hauteur explicite : 



I height: 200px; 



En l'absence d'une telle specification, quel serait son comportement ? Reduisons 
cette declaration a 20 px, ce qui permettra d'observer le comportement du fond 
jaune. 

Sur Internet Explorer, le bloc <div> est alors « pousse » par le paragraphe le plus 
long, mais c'est une mauvaise interpretation du comportement standard. Celui-ci est 
observable sur d'autres navigateurs, comme Opera ou Firefox. Leur affichage est 
repris figure 7-18. 

Les deux paragraphes, desormais sortis du flux, n'interferent plus sur la hauteur du 
bloc <di v>. Sans le petit residu de hauteur qu'on lui a accorde, il serait done invisible. 
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Figure 7-18 
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Ce comportement des elements flottants est normal mais pose souvent des pro- 
blemes. On recourra alors a la propriete clear, qui interdit le voisinage d'un flottant. 

Ses trois valeurs possibles (left, right, both) portent respectivement sur les cotes 
gauche, droit, gauche et droit. L'instruction clear: left interdit tout flottant a 
gauche ; clear: both interdit tout flottant au meme niveau. L'element concerne est 
alors pousse vers le has jusqu'a ce qu'il satisfasse les conditions qui lui sont imposees. 

Testons cette propriete en placant une ligne horizontale (<hr/>) sous les flottants. 
Pour cela, elle devra recevoir la propriete cl ear : both ; 

.separation { 
clear: both; 
} 

Le code HTML suivant : 

<div> 

<p id="premier">premier paragraphe de texte</p> 

<p id="second">deuxieme paragraphe de texte deuxieme paragraphe de texte 

deuxieme paragraphe de texte deuxieme paragraphe de texte </p> 

<hr class="separation" /> 

</div> 

produit alors le resultat recherche (on houbliera pas de supprimer la hauteur explicite 
du bloc <div> pour que celle-ci s'adapte automatiquement a son contenu). Le conte- 
neur s'est bien etire jusqu'a inclure la ligne horizontale. On peut ensuite la cacher a 
l'aide de la declaration visibility: hidden, precisant de masquer l'element con- 
cerne sur les navigateurs graphiques : 

.separation { 
clear: both; 
visibility: hidden; 

} 
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Grace a cet element de separation, le bloc <ch'v> englobe desormais les deux paragra- 
phes flottants (figure 7-19). 



Figure 7-19 

Correction du 
depassement a 
I'aide de clear 



premier 

Bde 



deuxieme paragraphe de 
texte deuxieme 
paragraphe de teste 
deuxieme paragraphe 
texte deuxieme 
paragraphe de texte 
deuxieme paragraphe de 
texte 






: de 




Utilisee a bon escient, la propriete f 1 oat permet de nombreuses fantaisies visuelles, 
dont la plus frequente est sans doute de placer une illustration au sein d'un texte de 
contenu, mise en page frequente dans les livres ou la presse. 

C'est aussi a cette propriete qu'on recourt pour creer des lettrines de texte en CSS, 
application pratique que nous etudierons plus en detail au chapitre 10 (figure 7-20). 
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A nouveau, tout element positionne en flottant est considere de type bloc. Les ele- 
ments en ligne peuvent ainsi recevoir des dimensions et des bordures. 



Synthese Fonctionnement du positionnement flottant 

1 L'element est place normalement dans le flux, sous I'eventuel bloc qui le precede 
et par dessus I'eventuel bloc qui le suit. 

2 L'element dote de la propriete float est ensuite « pousse » a gauche ou a droite 
de son conteneur. Dans ce cas, les elements qui le suivent dans son conteneur pren- 
nent place autour de lui. 
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Quel positionnement adopter ? 

Apres ce survol des techniques de positionnement en CSS, se pose la question du 
choix. Placement classique (dans le flux) ; positionnements absolus, relatifs, fixes ou 
flottants : il est difficile d'avoir les idees claires et de degager des preferences. 

Ce recapitulatif indicatif est le fruit de mon interpretation et de mon experience per- 
sonnelles. D'autres methodes sont parfois justifiees ; tout depend de l'utilisation du 
document et de l'objectif poursuivi. Ces regies ne sont done en nulle maniere parole 
d'Evangile. 

Quand positionner dans le flux ? 

C'est le placement classique, suivant la structure hierarchique du code HTML. 
Chaque element se place par rapport a son frere aine dans le conteneur de leur 
parent, en dessous (cas des blocs) ou a cote (cas des elements en ligne). 

Par defaut, le premier enfant prend place en haut a gauche de son parent. Si c'est un 
bloc, il occupera toute la largeur disponible. Sinon, il se limitera a l'espace necessaire 
a son contenu. Les marges externes (margin) ou internes (padding) permettent de 
positionner precisement chacun des elements. 

C'est la technique a privilegier dans la plupart des cas, principalement pour les ele- 
ments internes de la page : textes, titres, images d'illustration, etc. On y recourra sans 
artifices pour placer tout le contenu, dont les elements en ligne. C'est en effet le posi- 
tionnement le plus souple, le plus fluide, et il s'affichera convenablement sur tous les 
ecrans et supports. 

Quand positionner en relatif ? 

Ce n'est qu'un cas particulier du positionnement en flux auquel on apporte des deca- 
lages a l'aide des proprietes top, right, bottom, et left. Un element relatif demeure 
done dependant de ses freres dans le flux, mais cela est souvent mal compris et cette 
technique incorrectement utilisee. 

J'utilise rarement ce mode de positionnement, auquel je ne trouve que deux applica- 
tions pratiques : 

• decaler ou superposer deux elements sans avoir recours a un positionnement hors 
du flux ; 

• obtenir un bloc conteneur « positionne » pour y placer d'autres elements (nous ver- 
rons un cas concret dans le chapitre 8, consacre au centrage des elements en CSS). 
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Quand positionner en absolu ou en fixe ? 

Ces schemas de positionnement font sortir du flux, ce qui peut aboutir a un affichage 
ne refletant pas la structure HTML. Ce n'est pas recommande : un document doit 
etre comprehensible meme si les styles CSS sont desactives. 

Internet Explorer commence a peine (depuis la tres recente version IE7) a prendre en 
charge le positionnement fixe (a moins de verser dans des « bidouilles », reservees aux 
experts, ce ne sera pas possible pour les anciennes versions). Le positionnement 
absolu, tres bien assimile par tous les navigateurs modernes, est done bien plus pra- 
tique. 

Son utilisation par defaut sur les logiciels WYSIWYG, massive et contraignante 
(positionnement au pixel pres) lui ont donne bien mauvaise reputation. II est tout a 
fait deconseille pour les elements de contenu (textes, images) devant rester fluides les 
uns par rapport aux autres. 

Correctement utilise (notamment avec des unites de tailles relatives comme em ou 
des pourcentages), le positionnement absolu permet pourtant la construction de 
pages fluides s'adaptant aux diverses resolutions et aux changements de taille des 
polices. II permet aussi de centrer tres simplement un site entier dans la fenetre du 
navigateur (voir a ce sujet le chapitre suivant). 

C'est done une methode de positionnement interessante pour la structure globale du 
site, les conteneurs generaux, les grandes zones de la page et les elements uniques 
(en-tetes, menus, pieds de page, etc.) 

Quand positionner en flottant ? 

Ici, 1' element sort du flux mais reste dependant des autres elements flottants, ce qui 
permet d'aligner simplement plusieurs objets cote a cote. 

Technique intermediate entre les positionnements en flux (tres instinctif ) et absolu 
(completement hors du flux), ce positionnement est utile pour placer des elements 
d'un cote ou de 1' autre dans un contenu (par exemple une illustration). 

C'est un concurrent frequent du positionnement absolu pour le placement des grands 
blocs conteneurs. Cependant, quelques defauts d'affichage et imprecisions dans les 
navigateurs imposent parfois des solutions de contournement. 
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Tableau 7-1 Choix du positionnement 



Mode de Conteneurs Contenu et Centrage Specif icites 
positionnement et blocs elements internes d'elements 


Dans le flux courant 


Non 


Oui 


Oui 


Reste dans le flux. Se positionne 
par rapport aux elements parent et 
freres. 


Position relative 


Non 


Oui 


Oui 


Decalage par rapport au flux avec 
les proprietes top, right, 
bottom et left. 


Position fixe 


Oui 


Non 


Oui 


Sort du flux. Pose des problemes 
sur Internet Explorer inferieur a IE7. 


Position absolue 


Oui 


Non 


Oui 


Sort du flux. Se place par rapport 
au premier ancetre positionne. Per- 
met les superpositions. 


Placement flottant 


Oui 


Oui 


Non 


Sort du flux. Le flottant « centre » 
n'existe pas. Attention a certains 
defauts d'affichage. 



Application pratique 



Apprenons par I'exemple en etudiant des sites concus en CSS. 

Le site de la librairie Eyrolles, realise par Olivier Meunier, est un excellent 
exemple pour s'inspirer des techniques et methodes CSS : 

► http://www.eyrolles.com/ 

Distinguons les parties principales de la page et determinons le mode de posi- 
tionnement de chacune. 



Chaque navigateur propose d'afficher le code HTML des pages web. Sous Firefox, 
on suivra pour cela le menu Affichage/Code source de la page sur Firefox ; avec 
Internet Explorer, c'est plus simplement Affichage/Source. Comme vous ne tar- 
derez pas a le remarquer, chaque partie de la page porte un identifiant qui la dis- 
tingue clairement dans le document HTML. La feuille de style principale du style 
est un document disponible a I'adresse : 

► http://www.eyrolles.com/layout/librairie/css/default.css 
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Comparez le document HTML a sa feuille de styles, reperez les elements HTML por- 
tant un identifiant et tachez de comprendre le choix de positionnement retenu 
pour chacun. 

Ce site a une structure et des styles complexes, mais les parties principales et leur 
mode de positionnement ne sont pas trop difficiles a reconnartre. 

Etudiez de meme d'autres sites concus en CSS ; tirez-en I'inspiration pour vos pro- 
pres creations. 
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Troisieme partie 



Travaux 
pratiques 



Apres ce tour d'horizon theorique de l'armature des feuilles de styles CSS (speci- 
fication et application des proprietes ; mise en forme du texte, des bordures et 
images ; les differents schemas de positionnement), cette troisieme partie se pro- 
pose d'aborder les cas concrets. Nous presenterons plusieurs applications prati- 
ques courantes et menerons un projet global de creation de site web profes- 
sionnel. 
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Centrage des 
elements en CSS 



La balise HTML <a"lign>, de par sa fonction de mise en forme, etant desormais 
deconseillee, il convient de reapprendre les fonctionnalites qu'elle proposait. Nous 
verrons dans ce chapitre comment aligner les objets, et notamment comment les cen- 
trer dans leur conteneur. 



Centrage des elements de contenu 

CSS propose deux methodes : distinguer les elements en ligne de leurs blocs conte- 
neurs (les proprietes d'alignement variant selon le type de i'element), ou differencier 
le centrage horizontal du centrage vertical. 

Nous designerons tout element en ligne (c'est-a-dire principalement les textes et leur 
mise en forme et les images) par l'expression « element de contenu », qui insiste plus 
sur leur semantique. 
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Centrage horizontal des elements de contenu 

Pour centrer des elements en ligne a l'interieur d'un bloc, il suffit d'appliquer a ce 
dernier la declaration text-align: center;. Elle portera sur tous les elements de 
contenu qu'il renferme. C'est de cette maniere que Ton peut centrer horizontalement 
textes et images. Le code suivant produit ainsi un affichage semblable a celui de la 
figure 8-1. 

HTML 

<div class="edito"> 

<img src="smile.png" alt="smiley" /> 

Un peu de texte 

</div> 



CSS 

div { 

width: 350px; 

height: lOOpx; 

background: yellow; 

} 

. edi to { 

text-align: center; 

} 



Figure 8-1 

Centrage horizontal 
de contenu 




Signalons a nouveau un bogue d'Internet Explorer : contrairement aux specifications 
du W3C (qu'il interprets mal), il applique aussi la propriete text-align aux ele- 
ments de type bloc. Ne vous y fiez pas : centrer les blocs de cette maniere ne fonc- 
tionnera pas sur les navigateurs plus respectueux des normes. 



Rappel Les methodes d'alignement du texte 

Rappelons les differentes valeurs de la propriete text-align: left, right, center, et 
justify. 
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Centrage vertical des elements de contenu 



La methode vertical-align 

Nous vous recommandons la lecture de l'annexe, et notamment de son catalogue inte- 
gral des proprietes CSS. II comporte une propriete tees interessante : verti cal -al ign. 
II est courant qu'on tente de lui faire centrer verticalement un contenu dans un bloc. 
Cela ne fonctionne pas, et tel nest pas l'objet de cette instruction dans les recom- 
mandations du W3C. verti cal -al i gn ne porte en effet que sur les elements en ligne 
ou de type « cellule de tableau » (porteurs de la declaration di spl ay : tabl e-cel 1 ). 

Cette propriete n'est pas prevue pour aligner un texte dans un bloc, mais un element 
en ligne avec un autre element en ligne (par exemple une image a cote d'un texte) ou 
dans un element de type cellule. Elle n'est done adaptee qu'au centrage des elements 
dans les blocs consideres comme des cellules de tableau. 

On peut modifier le type d'un element (et transformer un bloc en element en ligne 
ou inversement) avec la propriete CSS display. Cette derniere permet aussi de 
transformer un element en cellule de tableau comme suit : 

selecteur {display: table-cell;} 

On obtient alors un support adequat pour la propriete verti cal -al i gn et le centrage 
vertical d'elements. Malheureusement, la declaration di spl ay : tabl e-cel 1 n'est pas 
reconnue par certains navigateurs, parmi lesquels le plus repandu : Internet Explorer 
(y compris dans sa version 7). Cette incompatibilite dissuade de recourir a cette 
methode de centrage vertical. C'est pourquoi nous evoquons maintenant une tech- 
nique plus specifique. 

La methode line-height 

Rappelons que la propriete CSS line-height, a ne pas confondre avec les espaces 
kisses entre les paragraphes, determine la hauteur d'une ligne de texte dans un bloc. 
Par defaut, le texte prend place au centre de cette zone. 

Adopter une valeur de 1 i ne-hei ght egale a la hauteur du bloc conteneur provoquera 
done un centrage vertical du texte dans ce dernier. C'est evidemment une 
« bidouille » tees specifique et fragile, qui ne fonctionne pas si le contenu occupe plu- 
sieurs lignes. Illustrons cette methode avec 1' exemple d'un bloc conteneur (un <div> 
d'identifiant conteneur) de meme hauteur que la propriete line-height. 

HTML 

<div id="conteneur"> 

Un texte centre verticalement 

</div> 
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CSS 

div#conteneur { 
background: yellow; 
height: 80px; 
line-height: 80px; 
width: 300px; 
} 

Cela permet de centrer verticalement son contenu, comme on l'observe figure 8-2. 



Figure 8-2 

Centrage vertical 
du contenu 




Centrage des blocs et conteneurs 

Pour centrer les blocs et grandes zones de la page, la propriete text-align ne fonc- 
tionne plus : elle ne porte que sur les elements en ligne. 



Centrage horizontal des conteneurs 

II existe deux techniques principales pour centrer des elements voire la page tout 
entiere dans la fenetre de visualisation. La premiere conserve le positionnement dans 
le flux ; la seconde en sort par l'emploi de positions absolues. On choisira l'une ou 
l'autre en fonction des contraintes et de la configuration recherchee. 

Centrage dans le flux courant 

On centre un bloc dans son conteneur en lui specifiant une largeur (width) et des 
marges laterales automatiques. L'exemple suivant, represente figure 8-3, centre deux 
paragraphes dans un bloc <di v>. 

HTML 

<div id="conteneur"> 
<p>Un bloc centre</p> 
<p>Un second bloc centre</p> 
</div> 
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CSS 

div#conteneur { 

background: yellow; 

width: 300px; 

} 

div#conteneur p { 

background: orange; 

width: 200px; 

margin-right: auto; 

margin-left: auto; 

} 

En ecriture raccourcie cela donne : 

div#conteneur p { 
background: orange; 
width: 200px; 
margin: auto; 

} 



Figure 8-3 

Centrage horizontal 
dans le flux 




On pourra de meme centrer une page web dans le conteneur general du document, la 
balise <body>, en y centrant un bloc global renfermant tous les elements. 

Les ecritures courtes suivantes synthetisent les proprietes margin -left et margin - 
right : 

margin: auto auto; 



ou encore : 



margin: auto ; 



Cette technique ne fonctionne pas dans Internet Explorer jusqu'a la version 5.5 
incluse. Ces navigateurs veterans comprendront en revanche la propriete text- 
align, mais en i'interpretant mal : rappelons qu'IE lui fait centrer a tort les elements 
de type bloc au lieu de ne la faire porter que sur les elements en ligne. 
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On assure done la compatibilite avec ces anciennes versions en ajoutant cette pro- 
priete sur le conteneur. On retablira ensuite l'alignement normal (left) dans les 
paragraphes pour leur eviter d'heriter de cet alignement de texte : 

CSS 

div#conteneur { 
background: yellow; 
width: 300px; 
text-align: center; 
} 

div#conteneur p { 
background: orange; 
width: 200px; 
margin-right: auto; 
margin-left: auto; 
text-align: left; 
} 

Cette technique centrera horizontalement tout bloc dans son conteneur. On 
n'omettra pas de preciser une largeur au bloc a centrer, sans quoi il occupera tout 
l'espace disponible. 

II nest pas possible de placer les elements en position absolue (ou fixe) : le conteneur 
etant centre tout en restant dans le flux, positionner son contenu le ferait sortir du 
flux et done du bloc. Pour cela, il est indispensable que le conteneur soit lui-meme 
positionne. 

Nous avons vu la propriete pour positionner un element tout en le laissant dans le 
flux : position: relative. Ce positionnement relatif, sans les proprietes top, right, 
bottom, ou left, permet de centrer le bloc tout en y incluant des elements 
positionnes : 

div#conteneur p { 
position: relative; 

background: orange; 
width: 200px; 
margin-right: auto; 
margin-left: auto; 
text-align: left; 
} 

Les deux paragraphes de cet exemple constituent les blocs a centrer dans l'element 
<div>. Etant eux-memes positionnes, ils pourront contenir d'autres elements en 
position absolue. 
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Centrage en positionnement absolu 

On peut encore recourir a un positionnement absolu assorti de marges negatives, 
technique capable d'aligner les blocs aussi bien horizontalement que verticalement. 
Signalons toutefois que cette methode est moins ergonomique et causera des soucis 
d'affichage dans certaines conditions (retrecissement de la fenetre). Elle ne devra etre 
employee que lorsque la methode de centrage decrite precedemment ne convient pas. 
Commencons par l'etude du centrage horizontal. 

II s'agit de placer le bloc a la position absolue 1 eft : 50% ; : son cote gauche se trouve 
alors au centre de la page. II faut done decaler le bloc a gauche de la moitie de sa lar- 
geur en fournissant une valeur negative a la propriete margin-left. 

En pratique, pour centrer horizontalement un bloc <p> large de 200px dans un conteneur 
<ch'v> large de 300px, on precede comme suit: positionnement absolu du paragraphe 
(l eft a 50%) puis decalage a gauche de la moitie de sa largeur (margi n-1 eft de -lOOpx). 

CSS 

div#conteneur { 

position: relative; 

background: yellow; 

width: 300px; 

height: lOOpx; 

} 

div#conteneur p { 

position: absolute; 

left: 50%; 

margin-left: -lOOpx; // (decalage de la moitie de la largeur de l'objet) 

background: #ccc; 

width: 200px; 

} 

HTML 

<div id="conteneur"> 

<p>Un texte centre</p> 

</div> 

La figure 8-4 illustre le resultat de cette technique : 



Figure 8-4 

Centrage horizontal 
en position absolue 




Pour le centrage horizontal, cette methode n'apporte rien a la technique de marges auto- 
matiques presentee plus haut. En revanche, elle autorise l'alignement vertical des blocs. 



Travaux pratiques 

Troisieme partie 



Centrage vertical des conteneurs 

L'alignement vertical des blocs reprend les differentes astuces presentees pour la pre- 
miere dimension (en excluantla technique du line-height, reservee aux elements en 
ligne). Coupler la propriete vertical-align a l'instruction display: table-cell 
fonctionne en theorie... mais bogue sur Internet Explorer, navigateur le plus repandu. 

Le plus pratique est done d'adapter la derniere methode etudiee : associer un posi- 
tionnement absolu a des marges negatives. Pour un paragraphe de hauteur 50px, on 
appliquera ainsi top : 50% puis margin -top: -25px : 

CSS 

div#conteneur { 
position: relative; 
background: yellow; 
width: 300px; 
height: lOOpx; 
} 

div#conteneur p { 
position: absolute; 
top: 50%; 
height: 50px; 
margin-top: -25px; 
background: #ccc; 
} 



// (decalage de la moitie de la hauteur de l'objet) 



HTML 

<div id="conteneur"> 
<p>Un bloc centre</p> 
</div> 



Figure 8-5 

Centrage vertical en 
position absolue 




Le resultat obtenu est presente figure 8-5. C'est bien le bloc « element paragraphe » 
qui est centre verticalement, et en aucun cas son contenu textuel. On pourra traiter 
ce dernier avec la technique du line-height : 

div#conteneur p { 
position: absolute; 
top: 50%; 
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height: 50px; 
line-height: 50px; 

margin-top: -25px; 
background: #ccc; 
} 

Les techniques d'alignement presentees ici ne fonctionnent pas correctement sur 
tous les navigateurs. On ne recourra done aux centrages horizontaux (et surtout ver- 
ticaux) qu'avec parcimonie. 

Dans le cadre specifique d'un centrage vertical, soyons tout a fait honnete : en raison du 
manque de conformite d'Internet Explorer, les methodes de centrage vertical en CSS 
se revelent complexes et delicates. La solution la plus robuste et souvent la plus acces- 
sible demeure la classique cellule de tableau, dont le centrage vertical pourra alors etre 
applique a l'aide de la propriete ve rti cal -al i gn, meme sur Internet Explorer ! 



Incompatibility Marges negatives dans IE 5 pour Mac 

Les marges verticales negatives fonctionnent mal sur Internet Explorer 5 pour Mac. On pourra ignorer ce 
probleme : e'est un navigateur ancien, qui n'est plus guere utilise. 



Application pratique 



Reprenons le projet de site portant sur I'Alsace. Voici le code HTML resultant des 
etapes precedentes : 



<body> 

<ul> 

<lixa href=" 

<lixa href=" 

<lixa href=" 

<lixa href=" 

<lixa href=" 

<lixa href=" 

</ul> 

<hlxa href="photos.htm" title="photos d'Alsace"> 

Bienvenue en Alsace</ax/hl> 

<h2>Une belle region f rangaise</h2> 

<p>[Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos. htm" title="lien vers des photos d'Alsace"> 

<img src="image. png" alt="photographie" /x/ax/p> 



"...">Retour a 1 'accueil</ax/li> 

"... '^Presentation de la region</ax/li> 

"...">Historique de 1 'Alsace</ax/li> 

"...">Castronomi e 1 ocal e</ax/l i> 

"...">H6tels et gites</ax/li> 

"...">Photographies</ax/li> 
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<h2>Un patrimoine considerable</h2> 

<p>[Deuxieme paragraphe associe au sous-titre de niveau 2.]</p> 

<p>Pied de page et <a href="...">Mentions legal es</ax/p> 

</body> 

Cette page serait bien plus agreable si elle etait centree horizontalement. Com- 
ment proceder ? 



Pour centrer un document compose de plusieurs elements (titres, menus, etc.), il 
faut regrouper ces derniers dans un conteneur (<div>) global de largeur fixee (a 
750 pixels dans le cas present). II suffit alors de centrer ce dernier. On obtient le 
code suivant : 



<body> 

<div id 

<ul> 

<li 

<li 

<li 

<li 

<li 



conteneur > 



'>Retour a 1 'accueil</ax/li> 
^Presentation de la region</ax/li> 
'>Historique de 1 'Alsace</ax/li> 
'>Castronomie local e</ax/li> 
'>H6tels et gites</ax/li> 

'>Photographies</ax/li> 



'photos.htm" title="photos d'Alsace">Bienvenue en Alsace 



ixa href= 
ixa href= 
ixa href= 
ixa href= 
ixa href= 

<lixa href= 

</ul> 

<hlxa href= 

</ax/hl> 

<h2>Une belle region f rangaise</h2> 

<p> [Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos.htm" title="lien vers des photos d'Alsace"> 

<img src="image.png" alt="photographie" /x/ax/p> 

<h2>Un patrimoine considerable</h2> 

<p>[Deuxieme paragraphe associe au sous-titre de niveau 2.]</p> 

<p>Pied de page et <a href="...">Mentions legal es</ax/p> 

</div> 

</body> 

Auquel on associera le style CSS : 

#conteneur { 
position : relative ; 
width : 750px ; 
margin : auto ; 
background-color : #ccccff ; 
} 



Resultat : un document parfaitement centre ! 
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Precharger des images 



Malgre le developpement de l'lnternet haut debit, certaines illustrations lourdes ou 
effets de menus complexes reposant sur des objets graphiques peinent toujours a 
s'afficher. Precharger les images consiste a stocker les graphiques les plus volumineux 
dans une zone memoire dite « cache », de facon transparente, leur assurant ainsi une 
reactivite immediate. 



Principe et utilite 

Placer en memoire cache, des la page d'accueil du site, les images prenant place sur 
les diverses pages susceptibles d'etre visitees leur evitera le temps de latence du a la 
connexion, la requete, et leur chargement. C'est particulierement utile pour les 
images reagissant lorsqu'elles passent sous le pointeur de la souris (comme les bou- 
tons de menus). Generalement menee en JavaScript, cette technique devrait ideale- 
ment fonctionner en 1' absence de cette technologie (sur les navigateurs ne la prenant 
pas en charge ou chez les utilisateurs l'ayant desactivee). Nous aborderons ici deux 
methodes CSS pour anticiper le chargement des illustrations : la premiere les 
masque, l'autre les « affiche » en dehors de la zone de visualisation. 

Nous conclurons en nous penchant sur les consequences de ces methodes sur les visi- 
teurs handicapes, sur les problemes qu'elles posent dans les environnements ayant 
desactive CSS, et proposerons des solutions a ces situations particulieres. 



Travaux pratiques 

Troisieme partie 

Masquer les images 

Masquer un element dans un document web consiste a ne pas le representee Deux 
declarations CSS sont disponibles a cet effet : visibility: hidden et display: 
none. Elles different en ceci : 

• visibility: hidden masque l'objet mais reserve sa position et ses dimensions. 
L' element occupe done de l'espace sur la page. 

• display: none fait abstraction complete de l'objet dans le media concerne (Web, 
impression, etc.). Tout se passe comme s'il n'existait pas. 

Nous recourrons a la deuxieme solution, qui ne cree pas de vides dans le document. 

Application a une image 

Pour la precharger, il suffit d'appliquer a une image la propriete CSS display: 
none : 

<img src="imagel. png" style="di splay: none;" alt="" /> 

On assurera le chargement prioritaire de cette image en placant ce code au tout debut 
du document, juste sous la balise <body>. L'attribut alt vide, important, evite aux 
navigateurs en mode texte ou pour non voyants de tenir compte de cette image. 

Cette methode, convenable pour des cas particuliers ou isoles, peut etre adaptee pour 
des ensembles d'images. 

Application a un ensemble d'images 

Quand il s'agit de precharger plusieurs images simultanement, il est preferable 
d'extraire les styles CSS de leurs balises pour les placer en dehors du code. La pre- 
miere solution consiste a doter chaque image d'une classe cache : 

HTML 

<img src="imagel. png" class="cache" alt=""/> 
<img src="image2 . png" class="cache" alt=""/> 
<img src="image3. png" class="cache" alt=""/> 



CSS 

.cache {display: none;} 
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On allegera le code et rassemblera efficacement ces images dispersees en regroupant 
toutes les illustrations a masquer au sein de la balise neutre <ch'v> : 

HTML 

<div class="cache"> 

<img src="imagel. png" alt=""/> 

<img src="image2 . png" alt=""/> 

<img src="image3. png" alt=""/> 

</div> 

CSS 

.cache {display: none;} 

Cette technique ne fonctionne pas dans la version Windows 98 d'Internet 
Explorer 6. Ce navigateur ignore en effet tout contenu dote de la propriete di spl ay : 
none ; il ne precharge rien et ne stocke rien en memoire cache. C'est le moment 
d'introduire une autre solution : l'affichage des images hors du champ de vision. 



Figure 9-1 

Effet sur les anciens 
navigateurs, ou sur les 
navigateurs ou CSS est 
desactive. 



Votre navigateur ne comprend pas les CSS. 

Ne tenez pas compte des eventuelles images qui s'affichent ci-dessous. 




L'affichage hors de la zone de visualisation 

Certains navigateurs interpretant la regie display: none a la lettre, sans meme 
placer les images concernees en memoire cache, on peut faire appel a une astuce : 
placer les illustrations hors des limites de la zone vue. 5 000 pixels plus haut que le 
debut de la page devraient suffire : 



HTML 

<div class="cache"> 
<img src="imagel. png' 
<img src="image2 . png' 
<img src="image3. png' 
</div> 



alt=" 
alt=" 
alt=" 






Travaux pratiques 

Troisieme partie 



CSS 

.cache { 

position: absolute; 

left: 0; 

top: -5000px; 

} 

Ainsi, tous les navigateurs traiteront ces images... en les reproduisant a un endroit 
inaccessible au visiteur. 



Aper^u avant I 'application de la regie .cache {display : rone ; 



im age 1. prig 




imaged, png 




innigeJ.pag 



titre du document 



Loieniipsuiii dokii klL hiiicL, utniscuLcLuci adipuiuiiig elil. IuLe^ei k 



Apenju apres I 'application de la regie .cache {display : none; 



titre du document 



Lorem ipsum dolor sit amet consectetuer adipiscina elit. Integer k 



Figure 9-2 Affichage avec display: none 



Apercuavant I 'application de la regie .cache {visibility : hidden; } Apercjj apres I 'application de la regie .cache {visibility : hidden ; 



im age 1. prig 




imaged, png 




unigeJ.pQg 



titre du document 



Lorem ipsum dolor sit amet, consectetuer adipisciiig elit. Integer it 



titre du document 



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer k 



Figure 9-3 Affichage avec visibility: hidden 



L'affichage visibility: hidden, comme display: none, masque 1' element sur les 
navigateurs graphiques, mais la difference est que cette propriete conserve la place et 
la dimension reserves a l'element. Elle est done a eviter dans ce cas de figure et pour 
les prechargements d'images. 

Quid des environnements desactivant les styles CSS ? 
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Accessibility de ces techniques 



Ces deux methodes echouent chez les visiteurs pour qui les styles CSS sont inactifs. 
C'est aussi le cas sur les rares navigateurs antiques (comme Netscape 3) encore en 
fonctionnement, incapables de traiter le CSS et qui l'ignorent. Dans ces conditions, 
les images s'affichent alors la ou le code HTML les mentionne (probablement en 
debut de document), hors contexte. 

Un texte d'explication permettra d'exposer la situation a ces seuls visiteurs : 

<div class="cache"> 

<p>Votre navigateur ne comprend pas les CSS.<p/> 

<p>Ne tenez pas compte des eventuelles images qui s'affichent ci- 

dessous.</p> 

<hr /> 

<img src="imagel. png" alt=""/> 

<img src="image2 . png" alt=""/> 

<img src="image3. png" alt=""/> 

</div> 

Les navigateurs compatibles CSS, majoritaires, masqueront ou afficheront ces expli- 
cations hors zone tout comme les images. 



Pour aller plus loin Completer avec JavaScript 

Nous flirtons ici avec les limites du champ fonctionnel de CSS, ces techniques relevant davantage du tru- 
cage que des methodes de presentation structurelles et semantiques. Le chapitre consacre aux menus 
graphiques exposera des methodes evitant de recourir a de telles « bidouilles ». 
Une autre solution acceptable est d'ecrire les prechargements en JavaScript. La ou ce langage sera 
desactive, les images ne seront pas prechargees, ce qui ne nuira pas a la lisibilite du document et ne per- 
turbera personne. 

Les lecteurs interesses par ces techniques en JavaScript pourront consulter les references suivantes : 

CO HTML et JavaScript, Philippe Chaleatet Daniel Charnay, Editions Eyrolles 

CO Initiation a JavaScript, Don Gosselin, Editions Eyrolles 



. Travaux pratiques 

Troisieme partie 



Application pratique 



Notre projet de site touristique alsacien comporte une image cliquable : 

HTML 

<p>[Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos.htm" title=""lien vers des photos d'Alsace"> 

<img src="image.png" a"lt="photographie" /></a> 

</p> 

Appliquez-y les diverses techniques de prechargement d'image. Testez d'abord 
I'application directe de la declaration display: none sur la balise <img>, puis 
appliquez une classe et masquez I'image. 

II faudra ecrire deuxfois le code <img. . . />. 

<img src="image.png" a"lt="photographie" /> 

La premiere occurrence, en haut de <body> prechargera I'image en la masquant. 
La deuxieme, placee ou I'image doit apparartre, la mettra en place a propre- 
ment parler. 
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Lettrines 



La lettrine etait chere aux moines enlumineurs. Elle permet de mettre en valeur la 
premiere lettre d'un texte, chapitre ou paragraphe, en lui attribuant une taille impo- 
sante, parfois en la parant richement. Les styles CSS sont tout indiques pour ce type 
d'effet visuel. 



Methode standard : le pseudo-element :first-letter 

La norme CSS 2 affine la selection des elements par ses mots-cles : f i rst-1 i ne (pre- 
miere ligne) ou :fi rst-1 etter (premiere lettre), dits « pseudo-elements », qui ne por- 
tent que sur une portion de la balise consideree. Pour ne modifier que la premiere lettre 
d'un paragraphe, on appliquera ainsi : fi rst-1 etter a la balise <p> (figure 10-1) : 

CSS 

p:fi rst-1 etter { 
font-weight: bold; 
} 

HTML 
I <p>Lorem ipsum dolor. ..</p> 



Travaux pratiques 

Troisieme partie 



Figure 10-1 

Utilisation de 
:first-letter 



Lorem ipsum dolor sit amet, consectetuer adipiscing 
mass a. Etiarn vitae mass a. Vivamus aliquam aliquam 
metus 



Cette instruction offre la possibility d'embellir les lettrines de maniere bien plus ela- 
boree. Quelques modifications d'habillage produisent ainsi le resultat de la figure 10-2. 
La premiere lettre du paragraphe s'y distingue par sa couleur, sa graisse et sa grande 
taille. 



CSS 

p { 

width: lOem; 

} 

p:fi rst-letter { 

font-weight: bold; 

font-size: 3em; 

color: #7a0000; 

} 



HTML 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Pellentesque laoreet feugiat massa. Etiam vitae massa. Vivamus aliquam 
aliquam pede. Suspendisse rutrum sollicitudin metus</p> 



Figure 10-2 

Lettrine mise en place 

avec 

:first-letter (I) 



A-iorem ipsum dolor sit 
arnet, consectetuer 
adipiscing elit. 
Pellentesque laoreet 
feugiat massa. Etiam vitae 
massa. Vivamus aliquam 
aliquam pede. 
Suspendisse rutrum 
sollicitudin metus 



Dans les livres imprimes, les lettrines ne depassent pas du texte mais en marquent le 
coin superieur, le reste du paragraphe epousant leur forme. Cette technique, mise en 
place avec la propriete f 1 oat, nous est desormais familiere (figure 10-3) : 
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CSS 

p { 

width: lOem; 

} 

p:fi rst-letter { 

font-weight: bold; 

font-size: 3em; 

color: #7a0000; 

float: left; 

} 



HTML 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Pellentesque laoreet feugiat massa. Etiam vitae massa. Vivamus aliquam 
aliquam pede. Suspendisse rutrum sollicitudin metus</p> 



Figure 10-3 

Lettrine mise en place 

avec 

:first-letter (II) 



Lorem ipsum dolor sit 
amet, consectetuer 
adipiscing elit. 
Pellentesque laoreet 
feugiat massa. Etiam vitae 
massa. Vivamus aliquam 
aliquam pede. 
Suspendisse rutrum 
sollicitudin metus 



En testant d'autres enrichissements, on constate rapidement que les proprietes 
display, width, et height ne portent pas sur le pseudo-element :fi rst-letter. 
Voila qui restreint considerablement les fonctionnalites graphiques disponibles. 
D'autre part, le pseudo-element :fi rst-letter n'est pas interprete sur les versions 
d'Internet Explorer anterieures a 5.5. C'est pourquoi la section suivante evoque une 
methode moins semantique mais plus pratique. 



Internet Explorer Attention a I'accolade 

Internet Explorer 6 ne prend pas en compte le pseudo-element :first-letter si I'accolade lui est directement 
collee. II faut imperativement laisser une espace entre :first-letter et I'accolade ouvrante. Ce bogue est 
desormais resolu dans la version IE7. 



Travaux pratiques 

Troisieme partie 



CSS 2.1 Proprietes de :first-letter 

La norme actuelle CSS 2.1 corrige la liste des proprietes applicables a :first-letter : 

• letter-spacing et word-spacing sont appliquees. 

• line-height est appliquee. 

• text-shadow ne s'applique plus (puisqu'elle disparait totalement de la specification). 

• clear ne s'applique plus. 

• Chaque navigateur peut ajouter d'autres proprietes. 
Dans les faits : 

• line-height « remplace » en quelque sorte la propriete height. Si elle n'est pas appliquee a float, c'est 
I'equivalent d'un line-height sur :first-line. Dans le cas contraire, elle permet le plus souvent d'obtenir 
un effet similaire a height. 

• width est sans effet, mais letter-spacing, eventuellement associee au padding, permet le plus souvent 
de produire I'effet recherche avec width. 



Variante pour anciens navigateurs 



Le pseudo-element : first-letter est peu adapte a la creation de lettrines graphi- 
ques fonctionnant sur tous les navigateurs. Une autre technique le supplantera 
efficacement : il s'agit d'isoler la premiere lettre manuellement, en la placant dans la 
balise neutre <span> (en ligne). Nous y appliquerons alors les effets visuels souhaites : 
taille, arriere-plan et positionnement flottant, de sorte que le reste du texte s'ecoule 
autour de la lettrine ainsi formee. 

La classe lettrine recevra les caracteristiques suivantes : hauteur de trois caracteres, 
interligne d'un caractere, police Georgia, gras, rouge fonce, avec bordure rouge et 
fondjaune (figure 10-4). 

HTML 

<pxspan class="lettrine">L</span>orem ipsum dolor sit amet, 
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam 
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus</p> 

<pxspan class="lettrine">L</span>orem ipsum dolor sit amet, 
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam 
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus</p> 
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CSS 

.lettrine { 

float: left; 

font: bold 3em/lem Georgia, Times New Roman, Times, serif; 

color: #900; 

border: lpx solid #900; 

background-color: #ffc; 

margin-right: 3px; 

padding: lpx; 

} 



Figure 10-4 

line lettrine graphique 



orem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque laoreet feugiat 
massa. Etiam vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus 

orem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque laoreet feugiat 
massa. Etiam vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus 



Cette methode a l'inconvenient d'imposer au redacteur de specifier manuellement la 
portee de la lettrine. C'est aussi une balise depourvue de semantique, methode a pros- 
crire dans un design bien structure. Malgre tout, c'est une solution de contournement 
necessaire pour obtenir certains effets impossibles avec la technique : f i rst-1 etter. 

Les exemples de la figure 10-5 inspireront la creativite du lecteur. lis recourent tous 
deux a la technique de la balise <span>. 



Figure 10-5 

Exemples de lettrines 
graphiques 



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque laoreet feugiat 
massa. Etiam vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 

sollicitudin metus 



i 



orem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque laoreet feugiat 
massa. Etiam vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
:-lli':imlui mem: 



C'est le code suivant qui a permis d'obtenir un tel resultat : 



HTML 

<pxspan class="lettrine">L</span>orem ipsum dolor sit amet, 
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam 
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus</p> 



Travaux pratiques 

Troisieme partie 



<pxspan class="lettrinebis">L</span>orem ipsum dolor sit amet, 
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam 
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum 
sollicitudin metus</p> 



CSS 

. lettrine { 

float: left; 

font: bold 2em/lem Georgia, Times New Roman , Times, serif ; 

color: #990000; 

border: lpx solid #990000; 

background-color: #FFFFCC; 

margin: lpx; 

padding: lpx; 

} 

.lettrinebis { 

float: left; 

font: bold 3em/lem Georgia, Times New Roman , Times, serif ; 

color: #fff; 

border: 2px groove #997F7F; 

background-image: url (fond.png) ; 

margin: lpx; 

padding: lpx; 

} 



Lettrines 

Chapitre 10 



Application pratique 



II est temps de reprendre le projet de site presentant la region Alsace. Mettons 
en pratique ce chapitre et appliquons une lettrine a chaque premiere lettre des 
paragraphes du document. Voici pour memoire le code HTML auquel nous 
etions parvenus : 



..">Retour a 1 'accuei"l</a></"li> 

.. '^Presentation de la region</ax/li> 

">Historique de 1 'Alsace</ax/li> 

">Cast ronomi e 1 oca! e</ax/l i > 

">H6tels et gites</ax/li> 

">Photographies</ax/li> 



<div id="conteneur"> 

<ul> 

<lixa href="..." 

<lixa href="..." 

<lixa href="..." 

<lixa href="..." 

<lixa href="..." 

<lixa href="..." 

</ul> 

<hlxa href=" photos. htm" title="photos d'Alsace">Bienvenue en Alsace 

</ax/hl> 

<h2>Une belle region f rangaise</h2> 

<p>[Paragraphe associe au sous-titre de niveau 2.]<a href="photos. htm" 

title="lien vers des photos d'Alsace"ximg src="image.png" 

alt="photographie" /x/ax/p> 

<h2>Un patrimoine considerable</h2> 

<p>[Deuxieme paragraphe associe au sous-titre de niveau 2.]</p> 

<p>Pied de page et <a href="...">Mentions legal es</ax/p> 

</div> 

On pourrait opter pour la propriete : f i rst-1 etter comme suit : 

p: fi rst-letter { 
font-weight: bold; 
font-size: 2em; 
color: #330099; 
float: left; 
} 
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Afficher et masquer 



Habituellement reserves aux langages de programmation tels que JavaScript, les 
effets speciaux d'apparition et disparition d'objets au passage du pointeur de la souris 
sont desormais accessibles en CSS. En associant sa pseudo-classe : hover a des ins- 
tructions de style, on pourra ainsi reproduire tres simplement certains comporte- 
ments dynamiques sans faire appel a des scripts. 



Les comportements dynamiques en CSS 



Faire apparaitre un element precis lors du survol d'un element de la page par le poin- 
teur de la souris, accompagner celui d'un lien du menu d'une image d'explication... 
realiser ces comportements dynamiques en styles CSS evite de recourir a des scripts 
ou au langage Flash de Macromedia, qui ne fonctionnent pas partout. 

Les statistiques mondiales du site web w3schools (http://www.w3schools.com/browsers/ 
browsers_stats.asp) estiment en effet que JavaScript est desactive dans un ordinateur 
sur dix. Les plug-ins comme Flash et Shockwave ne sont pas non plus installes par- 
tout par defaut, et leurs dernieres versions mettent du temps a diffuser. En revanche, 
tous les navigateurs graphiques recents connaissent les feuilles de styles CSS, meme 
s'il est important de noter que chacun est libre de les desactiver. 



Ml Travaux pratiques 

fll TROISIEME PARTIE 

Afficher et masquer des elements 

C'est la pseudo-classe : hover qui nous ouvrira les portes des comportements dyna- 
miques. La norme CSS 3, en cours d'elaboration, proposera d'autres pseudo-classes 
telles que : target pour etoffer ces possibilites. Dans l'immediat, le repertoire de 
CSS se limite a reagir au survol d'objets par le pointeur de la souris. 

Selon les besoins etles applications, on associera la pseudo-classe : hover aux decla- 
rations display: none, display: block, ou display: inline. 

Limitations dues aux navigateurs 

La norme CSS 2 specifie que la pseudo-classe : hover peut porter sur tout element 
du document. On peut done imaginer des effets dynamiques se produisant lors du 
survol d'une image, d'un titre de section, d'un paragraphe, d'elements de liste, etc. 

Dans la pratique, Internet Explorer 6 n'est capable d'appliquer : hover qua la seule 
balise <a>. II l'ignorera dans tous les autres cas. Ce bogue est contraignant : il s'agit en 
effet de rester compatible avec le plus grand nombre d'utilisateurs. C'est pourquoi nous 
limiterons la portee des comportements dynamiques en CSS au seul element <a>. 

Lelement en ligne <a> peut toutefois jouer le role de conteneur et renfermer d'autres 
elements en ligne. Pour afficher et masquer une image, on la placera dans un element 
<a> reagissant au survol de la souris. 



Internet Explorer Application de :hover 

La version 7 du navigateur de Microsoft corrige ce probleme facheux et ouvre de nouveaux horizons aux 
developpeurs web. 



Premiere application pratique 

Dans un premier temps, illustrons simplement le fonctionnement general du survol 
de lien. Le passage du pointeur de la souris au-dessus d'un lien doit provoquer 
l'apparition d'une boite verte ailleurs sur la page. Contrainte par ce qui precede a 
occuper un element en ligne <a>, cette boite ne pourra pas etre de type bloc (<div> 
ne convient pas). Nous opterons done pour le conteneur en ligne neutre <span>. 

Rappelons qu'un element en ligne ne dispose pas de dimensions. Recourons aux 
techniques presentees dans le chapitre portant sur le positionnement : les elements 
positionnes en absolu et en relatif et les elements flottants se comportant comme des 
blocs, ils pourront recevoir des dimensions. Nous transformerons ainsi un element 
<span> en ligne en boite verte dimensionnee et placee a l'endroit desire. 
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Void la structure HTML du lien reagissant au survol : 

|<a href="#">Survolez pour voir la boite <span>texte et images peuvent 
etre places ici</spanx/a> 

L'element <span> est place dans une declaration de lien <a> qui porte ici sur la page 
courante (href="#"). Sans mise en forme CSS, ce lien s'affiche tel qu'en figure 11-1. 



Figure 11-1 

Comportement 
dynamique en CSS (I) 



Survolez pour voir la boite texte et images peuvent etre places ici 



Masquons l'element <span> pour le rendre invisible par defaut. Pour cela, le chapitre 
portant sur le prechargement d'images propose deux methodes : la regie display: 
none ou le placement hors du champ visible. Equivalentes dans leurs effets, elles dif- 
ferent beaucoup dans leur mise en place. Nous retiendrons par consequent la tech- 
nique la plus simple : di spl ay : none. 



COMPROMIS Theorie et pratique du display: none 

La methode du display: none est sans conteste la plus elegante. Pour masquer un 
element, il est plus naturel de specifier de cacher I'objet que de « bidouiller » a base 
de deplacements de I'objet hors de la zone visible. 

Dans le chapitre consacre aux images reactives et aux menus graphiques, nous abor- 
derons toutefois les limites de cette instruction : le manque de conformite de certains 
navigateurs non graphiques aux recommandations de la norme. 



Le code CSS suivant masquera les balises <span> situees dans des liens <a> : 

a span { 
display: none; 

} 

Attribuons la regie display: inline (ou block) aux zones <span> contenues dans 
des liens <a> survoles : 

a: hover span { 
display: inline; 
} 

On obtient ainsi le comportement desire : au repos, seul le texte « Survolez pour voir 
la boite » est affiche. Quand le pointeur de la souris survole ce lien, la partie « texte et 
images peuvent etre places ici » apparait. Seul le navigateur Internet Explorer ne 
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reagit pas au survol du lien, bien que les fonctionnalites employees soient autorisees 
et leur syntaxe conforme. Pour qu'il daigne reagir, il faut recourir a une astuce 
bizarre : specifier une couleur de fond au survol des liens : 

a: hover { 
background: none; 
} 

Voila qui corrige ce bogue et obtient d'Internet Explorer le comportement souhaite : 
IE ne reconnaissant que l'etat de survol pour un element <a>, a: hover span ne peut 
pas fonctionner si, prealablement, il n'est pas fait explicitement mention de la decla- 
ration de l'etat de survol a : hover. 

Le decor est plante : on peut done configurer cette boite en lui attribuant couleurs, posi- 
tion sur la page et dimensions. Void un exemple exploitant ces multiples possibilites : 

a: hover span { 
display: inline; 
position: absolute; 
top: 200px; 
left: lOOpx; 
width: 200px; 
height: lOOpx; 
background: green; 
text-align: center; 
color: white; 
} 

Ce code represente le texte explicatif sous forme d'une boite rectangulaire verte large 
de 200px et haute de lOOpx, placee en position absolue a 200px du haut et lOOpx a 
gauche du premier ancetre positionne. La figure 11-2 illustre le resultat ainsi obtenu. 



Figure 11-2 

Comportement 
dynamique en CSS i 



Survolez pour 


loir la boite 
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Autres applications et perspectives 

Quand tous les navigateurs interpreteront correctement les diverses pseudo-classes 
prevues par les normes a venir, et notamment quand ils sauront les appliquer sur 
chaque element et plus seulement sur la balise <a>, de nombreuses possibilites s'offri- 
ront aux designers web. 

Dans l'immediat, on peut deja afficher des commentaires au survol des menus, ainsi 
que des legendes ou infobulles (title) personnalisees au survol de photos ou d'illus- 
trations, comme nous le verrons ci-dessous. 

Commenter le survol des menus 

La prise en charge de la norme CSS dans les navigateurs actuels permet d'ores et deja 
d'agrementer un menu de commentaires se declenchant au survol de chaque lien. Le 
chapitre suivant, consacre a la conception de menus en CSS, en detaille les techni- 
ques et methodologies. Pour l'instant, un code commente et le resultat obtenu feront 
l'affaire. 



Figure 11-3 

Des commentaires au 
survol d'un menu 



Lien 2 



Lien 3 



Lien 4 



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ipsum dui, 
vulputate ut, eleifend pretium, tnstique a, velit. Morbi lacus 



HTML 

<body> 

<ul id="menu"> 

<lixa href="#">Lien l<span>Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, 

tristique a, velit. Morbi lacus</spanx/ax/li> 

<lixa href="#">Lien 2<span>Cras eu mi vel pede tempus dignissim. Etiam 

malesuada scelerisque massa. Maecenas metus sem, consectetuer quis, 

rhoncus non, euismod id, elit</spanx/ax/li> 

<lixa href="#">Lien 3<span>Cras fringilla. Integer in neque. Nulla 

massa. Vestibulum eleifend mattis erat</spanx/ax/li> 

<lixa href="#">Lien 4<span>Sed bibendum vehicula sem. Donee venenatis 

diam eu erat. Ut rutrum sem ut erat</spanx/ax/li> 

</ul> 

</body> 
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CSS 

ul { 

list-style-type: none; 
margin :0; 
padding:0; 
position: relative; 

/* positionnement du menu, pour contenir des elements positionnes */ 
width: 500px; 
} 

li { 

float: left; 

border-bottom: lpx solid black; 
} 

#menu a { /* definition de chaque bouton du menu */ 
width: lOOpx; /* largeur du bouton, modifiable a loisir */ 
height: 20px; 
float: left; 
display: block; 
text-align: center; 
border: lpx solid #fff; 
text-decoration: none; 
color: #000; 
background: #fff; 
} 

#menu a: hover { 
color: #411; 
background: #aaa; 
border: lpx solid black; 
border-bottom: lpx solid #555; 
} 

#menu a span { /* definition de la balise span incluse dans le lien <a> */ 
display: none; 

} 

#menu a:hover span { /* definition de la balise span lors du survol */ 

display: block; 

position: absolute; 

top: 23px; 

left: 0; 

width: 500px; 

text-align: left; 

color: #000; 

} 
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Des infobulles personnalisees 

Une infobulle est une explication contextuelle se declenchant au survol d'un mot ou 
d'une partie de texte specifique. La norme HTML prevoit deja cette fonctionnalite avec 
l'attribut ti tl e (a ne pas confondre avec al t, que certains navigateurs interpretent a tort 
comme title). Malheureusement, la representation de cette propriete est imposee : 
infobulles en jaune, sur une seule ligne, dans un nombre restreint de caracteres. 

Les comportements dynamiques en CSS nous permettront de creer nos propres 
infobulles (figure 11-4). 



Figure 11-4 

Une infobulle 
personnalisee 




Pour cela, reprenons en l'adaptant la technique presentee au debut de ce chapitre. 
Dans le cas present, la position du bloc depend du mot auquel il se rattache au lieu 
d'etre fixe sur la page. 

Le contenu de 1' element <a> est un conteneur pour l'element en ligne <span>, objet 
de l'affichage conditionne. Un span positionne impose un element <a> lui-meme 
positionne ; pour rester dans le flux et le paragraphe, un positionnement relatif est 
adequat. 

Dans le code suivant, les termes a survoler sont d'abord caracterises par un lien de 
classe i nf o ; ils sont alors mis en valeur par un texte noir et un soulignement en poin- 
tilles gris (utilisant une bordure basse). 

Lors du survol, une boite de texte (<span>) s'affiche deux caracteres sous le mot. Elle 
est verte et placee en absolu par rapport au mot. Void le code complet qui permet 
d'obtenir un tel resultat : 



HTML 

<p>Survolez le mot <a class="info" href="#">"Alsace"<span>region 
frangaise capitale de la choucroute</spanx/a> ou survolez le mot 
<a class="info" href ="#">"Strasbourg"<span>vi lie alsacienne ou il fait 
bon vivre!</spanx/a> pour obtenir des explications .</p> 
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CSS 

a. info { 

position: relative; 

text-decoration: none; 

color: black; 

border-bottom: lpx gray dotted; 

} 

a. info span { 

display: none; 

} 

a. info: hover { 

background: none; /* contournement d'un bogue d'lE */ 

z-index: 500; 

} 

a. info: hover span { 

display: inline; 

position: absolute; 

z-index: 500; 

top: 2em; 

1 eft : lem ; 

background: green; 

text-align: center; 

color: white; 

padding: 0.2em; 

} 



Legender le survol de photos 

On reprend l'idee des exemples precedents : le contenu de la legende apparait dans 
une balise <span> lors du survol du lien renfermant l'image. Le resultat du code sui- 
vant est presente figure 11-5. 



HTML 

<ul> 

<lixa href="#"ximg src=' 

l'image l</spanx/ax/li> 

<lixa href="#"ximg src=' 

l'image 2</spanx/ax/li> 

</ul> 



image. png" alt="imagel" /xspan>legende de 
image2.png" alt="image2" /xspan>legende de 
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CSS 

ill, li { 

margin :0; 

padding:0; 

list-style-type: none; 

} 

li { 

float: left; 

width: 150px; 

text-align: center; 

margin: lem; 

padding: 0.5em; 

border: lpx solid black; 

} 

li a { 

text-decoration: none; /* definition du lien qui affichera le caique */ 

color: black; 

} 

li a: hover { 

background: none; /* correction d'un bogue d'lE */ 

} 

1 i a span { 

/* definition de la balise <span> incluse dans le lien <a> */ 
display: none; 
} 

li a: hover span { /* definition de la balise <span> lors du survol */ 
display: block; 
} 

1 i a i mg { 
border :0; 
} 



Figure 11-5 

line legende apparait 
au survol d'une image. 
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Variante utilisant la propriete visibility 

L'exemple precedent fait appel a la regie display: none. Illustrons ce en quoi elle 
differe de l'instruction vi si bi 1 i ty : hi dden : 

li a span { 

visibility: hi dden ; 

} 

li a: hover span { 

display: block; 

vi si bi 1 i ty : vi si bl e ; 

} 

Dans ces conditions, le cadre entourant l'image ne fluctue pas au survol : il a reserve 
l'espace necessaire a 1'affichage de la legende. C'est visuellement moins perturbant. 



Exces DE ZELE Quand les navigateurs en mode texte font pire que mieux 

Les declarations display: none; et display: inline; n'ont de sens qu'en mode 
graphique. Dans les autres medias (notamment les navigateurs en mode texte), on 
s'attend a une interpretation du document web en mode degrade, ignorant toute 
instruction de mise en forme. 

Presque tous les navigateurs en mode texte affichent done les portions masquees de 
la page, ce qui pose des problemes de comprehension (surtout a I'interieur de I'ele- 
ment <a>). 



Application pratique 



L'exemple des infobulles personnalisees applique ces techniques a notre projet 
de site web alsacien. Je vous propose de le completer en I'appliquant a tous les 
mots importants du texte... que vous veillerez toutefois a ne pas surcharges 

A vous de jouer ! 
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Construire un 
menu en CSS 



Les styles CSS prennent une dimension particuliere dans la mise en forme des ele- 
ments de navigation, pour lesquels ils offrent des solutions tres simples a mettre en 
oeuvre. Le contraste est saisissant quand on les confronte aux nombreux tableaux 
imbriques et codes JavaScript complexes necessaires a l'obtention des plus elemen- 
taires effets de survol. 



Les differents systemes de navigation 



Des fonctionnalites de navigation coherentes et instinctives refletent une bonne 
architecture web. Tout visiteur egare dans les meandres de vos contenus en concevra 
une frustration le dissuadant de revenir sur votre site. 

Le plus beau site web du monde sera quand meme juge a l'aune de son ergonomie et 
de ses facilites de navigation. Vos visiteurs sont aussi impatients que vous : peu leur 
chaut de s'extasier sur vos experiences graphiques, ils cherchent avant tout des infor- 
mations, une assistance, des services. Seule une navigation intuitive les fidelisera. 

Le menu doit guider et orienter efficacement a chaque instant. II sera done accessible 
a tous les navigateurs, ce qui exclut les solutions complexes a base d'imbrications de 
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tableaux, de langages comme JavaScript ou de plug-ins comme Flash. On peut 
l'organiser sous forme de liste d'entrees disposees en colonne (menu vertical) ou 
d'elements places a la suite les uns des autres (menu horizontal). Ses briques elemen- 
taires seront de simples liens, des puces decoratives, ou des boutons cliquables. 

L'emploi de CSS pour la mise en forme de menus produira un code simple et concis, 
dont il sera facile de modifier l'apparence sans intervenir sur la structure ou le con- 
tenu de la partie HTML. 



Utilisation de listes non ordonnees 

Un menu est evidemment constitue de liens hypertextes, pointant vers d'autres pages 
web du site ou vers des parties specifiques d'une page web. Comme precedemment, 
on adoptera un codage refletant cette semantique et ne tenant pas compte de la 
representation recherchee. 

Une telle structure sera done traduite en HTML sous forme de liste, ordonnee 
(<o"l>) ou, le plus souvent, non ordonnee (<u"l>). Meme sur les navigateurs en mode 
texte et autres programmes incapables d'interpreter le CSS (ou dont l'utilisateur a 
choisi de desactiver cette fonctionnalite), un menu programme sous forme de liste 
apparaitra clairement. 

Reprendre le meme code HTML tout au long du chapitre mettra mieux en evidence 
le role et l'infiuence des feuilles de styles CSS qui lui seront associees. C'est le menu 
suivant que nous mettrons en forme de diverses manieres : 

HTML 

<ul id="menu"> 

<lixa href=""lienl.htm">Lien l</ax/"li> 

<lixa href=""lien2 .htm">Lien 2</ax/"li> 

<lixa href=""lien3 .htm">Lien 3</ax/"li> 

<lixa href=""lien4.htm">Lien 4</ax/"li> 
</u"l> 

II s'agit, comme annonce, d'une simple liste d'elements. Tous sont des liens hyper- 
textes (element <a>) ; l'identifiant menu distingue ce menu de navigation des even- 
tuelles autres listes de la page web. Sans mise en forme particuliere, ce menu de navi- 
gation apparaitra tel qu'en figure 12-1. 

La presentation par defaut n'est guere amene : des puces rondes prefixent les ele- 
ments de menu ; les liens sont bleus, soulignes, et d'un aspect tres sobre. Des feuilles 
de styles habilleront ce code de base pour produire un resultat bien plus plaisant. 
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Figure 12-1 

Patron de travail 
pour le menu 



• Lien 1 

• Lien 2 

• Lien 3 

• Lien 4 



Creer un menu vertical 

La presentation la plus classique est un affichage vertical, chaque lien etant place 
sous le precedent - schema qui rappelle la disposition classique des blocs dans le flux 
normal. L' element de liste <li>, de type bloc, adoptera done par defaut un tel com- 
portement. 

II reste a supprimer les marges internes et externes de la balise <ul>, qui changent 
d'un navigateur a l'autre et risquent de poser des problemes de compatibilite. Speci- 
fions egalement une police : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

} 

La propriete list-style-type porte sur la representation des puces. La valeur none 
les supprime : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

La figure 12-2 illustre le resultat intermediate ainsi obtenu. 



Figure 12-2 

Embryon de menu 
vertical 



Lien l 



Lien 2 



Lien 3 
Lien 4 
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II est temps d'habiller ce menu, en stylant ses liens <a>. lis seront verts et non soulignes : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

#menu a { 

color: green; 

text-decoration: none; 

} 

Toutes les proprietes dont le selecteur n'implique aucune pseudo-classe sont valables 
pour tous les etats de 1' element. Cette feuille de styles ne distingue done pas encore 
les divers etats de 1' element <a>. Un lien peut etre visite (pseudo-classe : visited), 
survole par le pointeur de la souris (: hover), actif, e'est-a-dire en cours de selection 
(:active), ou simplement dans son etat par defaut (:link). Sans autre precision, le 
survol du lien n'induira done aucune modification sur son apparence. 

A RETENIR Ordre de declaration des pseudo-classes 

II est recommande de declarer les pseudo-classes de liens selon I'ordre precis suivant, qui seul garantit 
leur correcte interpretation : 

1. :link 

2. : visited 

3. : hover 

4. : active 

Pour se le rappeler, on pourra penser a I'expression mnemotechnique « LoVe HAte » (amour-haine). 
Cette liste n'est pas complete. II manque par exemple le pseudo-element :focus qui designe I'element 
auquel on a donne I'attention, plus generalement lorsqu'on pointe un element via une navigation par cla- 
vier (touche Tab) et non au die. Ce pseudo-element est particulierement pratique pour augmenter I'acces- 
sibilite des liens concernes. Malheureusement, il sera inutile sur Internet Explorer, qui ne le reconnait pas. 



En explicitant un etat particulier, on modifie 1' apparence du lien dans cette seule 
situation. Pour representor en orange les liens situes sous le pointeur de la souris, on 
peut ainsi ecrire : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 
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list-style-type: none; 

} 

#menu a { 

color: green; 

text-decoration: none; 

} 

#menu a: hover, #menu a: focus { 

color: orange; 

} 

La propriete text-decoration etant heritee par defaut, et sa valeur precedente nous 
agreant, il nest pas necessaire de la preciser de nouveau. Ce menu acquiert peu a peu 
une allure convaincante. 

Ses liens sont toutefois un peu trop rapproches ; il sierait de les espacer un peu. La 
propriete margi n semble naturelle pour cela, et intuitivement on est rente d'appliquer 
a chaque element une valeur de margi n-bottom : 

#menu a { 

color: green; 

text-decoration: none; 

margin-bottom: 5px; /••' instruction sans effet ! */ 

} 

Ceci n'a pourtant aucun effet, quelle que soit la valeur de marge indiquee. Saurez- 
vous deviner pourquoi ? L'element en ligne <a> n'est pas l'une des rares exceptions 
(telles que la balise <i mg>) pouvant recevoir des dimensions ou des marges verticale- 
ment (en haut ou en bas de leur zone a l'ecran). La propriete margin-bottom ne s'y 
applique done pas. 

Pour aerer les differents liens du menu, deux techniques sont possibles. La premiere 
(appliquer une marge au parent de l'element <a>, soit <li>, qui est de type bloc) sera 
evoquee plus loin, lors de 1' elaboration d'un menu sous forme de boutons. Penchons- 
nous dans i'immediat sur la seconde : il s'agit simplement d'augmenter la hauteur de 
la boite de texte de l'element <a> par la propriete line-height. La figure 12-3 pre- 
sente le resultat final ainsi obtenu. 

#menu a { 
color: green; 
text-decoration: none; 
line-height: 25px; 

} 



Travaux pratiques 

Troisieme partie 



Figure 12-3 

Menu vertical finalise 
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Creer un menu sous forme de boutons 

Enrichissons ce menu vertical elementaire en y remplacant les liens hypertextes par 
des zones cliquables. Rejetant evidemment les techniques antiques empilant moults 
elements inutiles, <ch'v> ou autres cellules <td>, contentons-nous d'intervenir sur les 
styles de la structure existante. 

On obtient l'effet recherche en attribuant aux liens hypertextes hauteur, largeur, bor- 
dure et couleur de fond. L'element <a> apparaitra ainsi comme une forme carree ou 
rectangulaire cliquable. 

Completons le code du menu vertical : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

#menu a { 

color: green; 

text-decoration: none; 

line-height: 25px; 

} 

#menu a:hover, #menu a:focus { 

color: orange; 

} 

en y dotant les liens hypertextes de dimensions, d'une couleur de fond et d'une 
bordure : 



#menu a { 
color: green; 
text-decoration: none; 
line-height: 25px; 
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width: 120px; 
border: lpx solid black; 
background: #fcO; 
text-align: center; 

} 



Figure 12-4 

Menu sous forme 
de boutons (I) 



Lien l 



Lien 2 



Men 3| 

| ] 



Le resultat ainsi obtenu, represente figure 12-4, est un peu decevant : les elements du 
menu n'y sont pas larges de 120 pixels. Bon sang, mais c'est bien sur ! Nous avons vu 
que l'element <a>, en ligne, ne fait pas partie des rares exceptions pouvant recevoir 
des dimensions. II n'occupe que l'espace necessaire au texte qu'il contient, ce qui 
explique le comportement de ses bordures. 

II s'agit done de faire de ces liens des blocs, en les dotant simplement de la declara- 
tion display: block. 



Attention Bloc HTML ou bloc CSS ? 

II ne faut pas confondre la structure HTML de l'element et le comportement que Ton peut lui attribuer en 
CSS (ici, la balise <a> est de type « en ligne », quelle que soit la propriete CSS appliquee). 
En clair, display: block modifie le comportement de telle sorte que l'element <a> apparaisse comme un 
bloc (avec positionnement, hauteur et largeur), mais la structure HTML n'est pas modifiee : <a> reste un 
element en ligne et ne pourra pas contenir d'elements de type bloc. 



Profitons-en pour specifier des marges de 5 pixels en haut et en bas : 

#menu a { 
display: block; 
margin: 5px 0; 

color: green; 
text-decoration: none; 
line-height: 25px; 
width: 120px; 
border: lpx solid black; 
background: #fc0; 
text-align: center; 
} 
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Figure 12-5 

Menu sous forme 
de boutons (II) 
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Preciser un autre comportement pour la pseudo-classe de survol : hover apporte un 
effet de finition agreable : 

#menu a:hover, #menu a:focus { 
color: orange; 
background: green; 
} 

La figure 12-6 illustre l'effet de ces dernieres instructions : l'inversion des couleurs 
du lien survole par le pointeur de la souris. Le texte y passe en effet du vert a l'orange 
tandis que la couleur de fond subit la transformation inverse. Le chapitre suivant 
detaille la conception de menus graphiques avec images et reactions au survol par le 
pointeur de la souris (appeles rollover menus dans le metier). 



Figure 12-6 

Menu sous forme 
de boutons (III) 
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Produire un effet de relief sur les boutons 

Poursuivons dans cette voie en creant des boutons avec un effet de relief qui semblent 
s'enfoncer quand le pointeur de la souris les survole. Jouer sur les teintes des diffe- 
rents cotes des boutons assure l'effet de relief; les inverser donnera l'impression de 
profondeur d'un bouton pousse. Pour tout cela, il suffit d'ajouter quelques declara- 
tions de bordures sur 1' element <a> dans les styles deja crees : 

border-width: lpx 2px 2px lpx; 

border-color: #cecece #4a4a4a #4a4a4a #cecece; 

border-style: solid; 
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Ces valeurs se lisant dans le sens horaire en partant du haut, cette bordure, de style 
plein, sera en haut et a gauche epaisse d'un pixel et gris clair (#cecece), mais epaisse 
de deux pixels et gris fonce (#4a4a4a) en has et a droite. Comme precedemment, la 
pseudo-classe : hover inverse tout : couleurs et epaisseurs. 

border -width : 2px lpx lpx 2px; 

border-color: #4a4a4a #cecece #cecece #4a4a4a; 

Synthese des declarations de style ecrites jusqu'a present, representee figure 12-7 : 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

#menu a { 

display: block; 

margin: 5px 0; 

color: green; 

text-decoration: none; 

line-height: 25px; 

width: 120px; 

border: lpx solid black; 

background: #fc0; 

text-align: center; 

border-width: lpx 2px 2px lpx; 

border-color: #cecece #4a4a4a #4a4a4a #cecece; 

border-style: solid; 

} 

#menu a:hover, #menu a:focus { 
border-width: 2px lpx lpx 2px; 
border-color: #4a4a4a #cecece #cecece #4a4a4a; 
} 



Figure 12-7 

Des boutons en relief 







Lien l 








Lien 2 


^^M Lien survole 






Lien 3 








Lien 4 









Travaux pratiques 

Troisieme partie 



freer un menu horizontal 

La distinction claire entre le fond du code HTML et la forme de la mise en page 
CSS rend possible un bouleversement complet de l'agencement du menu sans inter- 
venir sur sa structure ou son contenu. Pour produire un menu horizontal tenant sur 
une seule ligne, on pourra done conserver le code HTML initial : 

HTML 

<ul id="menu"> 

<lixa href=""lienl.htm">Lien l</ax/"li> 

<lixa href=""lien2 .htm">Lien 2</ax/"li> 

<lixa href=""lien3 .htm">Lien 3</ax/"li> 

<lixa href="lien4.htm">Lien 4</ax/li> 
</ul> 



La plupart des styles CSS du menu vertical precedant pourront eux aussi servir tels 
quels : 

CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

#menu a { 

color: green; 

text-decoration: none; 

line-height: 25px; 

} 

#menu a:hover, #menu a:focus { 

color: orange; 

} 

Cette construction aboutit au menu vertical simple deja vu, dont l'affichage sous 
forme de colonne est imputable a 1'utilisation d'elements de liste <li> de type bloc 
(s'affichant par defaut les uns sous les autres). 

La declaration line-height: 2 5px n'a plus lieu d'etre ; seules les marges laterales 
nous concernent desormais. Pour placer les liens a la suite les uns des autres sur la 
meme ligne, les methodes de positionnement les plus simples a mettre en oeuvre sont 
les proprietes display et float. 
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Alignement avec la propriete display 

Cette technique simple consiste a transformer les blocs des listes (s'affichant par 
defaut en colonne) en elements en ligne (prenant place les uns a la suite des autres). 
Pour cela, il suffit d'appliquer la declaration di spl ay : i nl i ne aux elements <1 i > du 
menu, sans rien changer au bloc <ul> ni aux liens <a>. La figure 12-8 illustre le 
resultat ainsi obtenu. 



CSS 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-type: none; 

} 

#menu li { 

display: inline; 

} 

#menu a { 

color: green; 

text-decoration: none; 

} 

#menu a:hover, #menu a:focus { 

color: orange; 

} 



Figure 12-8 

Un menu horizontal (I) 
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Des espaces lateraux de 5 pixels faciliteront la lecture de ce menu horizontal. La 
declaration margin: 5px; (notation courte pour margin: 5px 5px; etnecon- 
cernant que les marges a gauche et a droite) produira un tel effet. Les marges late- 
rales etant admises pour les elements en ligne, on pourra au choix appliquer cette 
declaration aux elements <li> ou <a>, 

#menu li { 
display: inline; 
margin: 5px; 

} 
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Plus visuel : prevoir un element de separation physique entre deux liens successifs (ce 
pourra etre un trait d'union ou un trait vertical (|). Ce delimiteur clair, lu par les 
outils de synthese vocale, faciliterait la navigation des non voyants. Cette fonctionna- 
lite, illustree par la figure 12-9, implique une modification de la structure HTML : 



HTML 

<ul id="menu"> 

<lixa href="lienl.htm">Lien l</a> | </li> 

<lixa href="lien2 .htm">Lien 2</a> | </li> 

<lixa href="lien3 .htm">Lien 3</a> | </li> 

<lixa href="lien4.htm">Lien 4</ax/"li> 

</ul> 



Figure 12-9 

Un menu horizontal i 



Lien l | Lien 2 | Lien 3 | Lien 4 | 



Cette methode suppose que le contenu des objets de liste, transformed en elements 
en ligne, ne comporte aucun bloc. Elle interdit done la creation de menus graphiques 
sous forme de boutons, avec bordures, dimensions, couleurs de remplissage, etc. Tous 
les liens de la liste sont astreints a ne contenir que du texte. 

Pour concevoir un menu horizontal plus elabore, il faut conserver une structure sous 
forme de blocs, alignes par positionnement flottant. 



Alignement avec la propriete float 

Reprenons les styles precedents en changeant la declaration appliquee sur les listes 
display: inline devient float : left: 



#menu li { 
float: left; 

} 

L'effet produit est le meme. Au lieu de transformer les elements des listes en balises 
en ligne, nous les positionnons en flottants a gauche. lis prennent done place a la 
suite les uns des autres... tout en conservant leur structure de type bloc. Ceci leur 
permet de renfermer des liens convertis en blocs et dotes de dimensions. 

A nouveau, nous creons des boutons en transformant les liens en blocs ce qui permet 
de leur attribuer dimensions, bordure, couleur de fond et marges laterales (respecti- 
vement 120 pixels de large, cadre noir d'un pixel de large, orange #f cO, et 5 pixels sur 
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les deux cotes). Lelegant menu horizontal a base de boutons cliquables ainsi obtenu 
est represente figure 12-10. 



#menu a { 

display: block; 

width: 120px; 

border: lpx solid black; 

color: green; 
background: #fcO; 
margin: 5px; 

text-decoration: none; 
text-align: center; 
} 



Figure 12-10 

Un menu horizontal • 
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Creer un menu avec puces 

Jusqu'ici, nous avons choisi de gommer les puces des listes. La propriete 1 i st-styl e- 
type propose plusieurs styles de puces : carres, disques, cercles, etc. Via la propriete 
list-style-image, onpeut meme y placer des icones personnalisees. Penchons-nous 
sur cette derniere solution, bien prometteuse. 



Puces graphiques personnalisees 

Avec la propriete list-style-image, on precise le chemin d'acces a 1'image de puce 
comme suit: list-style-image: url (image. png). Les formats d'image reconnus 
sont GIF, JPEG ou PNG. Testons l'appel a une puce personnalisee d'environ 10 a 15 
pixels : 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-image: url (dossier/puce. png) ; 

} 
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Figure 12-11 

Puces graphiques (I) 
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puces a I'exterieur du conteneur 



On constate (figure 12-11) que les puces s'affichent hors du conteneur, le document 
body dans le cas present. Pour y remedier, on peut intervenir sur la marge de gauche 
de la liste (jusqu'ici de valeur nulle) ou placer les puces dans la liste avec la declaration 
list-style-position: inside : 

ul#menu { 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

list-style-image: url (dossier/puce.png) ; 

list-style-position: inside; 

} 

Voila qui produit une liste munie d'une puce graphique personnalisee. Comment 
modifier celle-ci lors d'un survol de son element de liste par le pointeur de la souris ? 

Theoriquement, la meilleure solution est d'appliquer la pseudo-classe : hover a l'ele- 
ment <li> (li : hover) pour indiquer une image de substitution. Malheureusement 
(nous avons deja signale ce bogue), le navigateur Internet Explorer, jusqu'a sa 
version 7, ne reconnait cette pseudo-classe qu'appliquee a la balise <a>. 

Composer a nouveau avec ces limitations implique un changement complet de 
methode : la balise <a> n'etant pas de type « liste », elle n'interprete pas la propriete 
list-style-image. Modifier la structure de cet element par la propriete display: 
list-item pourrait suffire... mais IE ne comprend pas non plus cette declaration. 

Le souci de compatibilite nous contraint done a proceder differemment : appliquer 
des images d'arriere-plan aux elements <a>. 



Recourir aux images d'arriere-plan 

II s'agit d'associer des images de fond differentes aux elements <a> et aux liens sur- 
voles (a: hover), qui remplaceront les puces des listes. Ajoutons de telles images de 
fond a l'habillage du menu vertical simple : 
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ul { 

list-style-type: none; 

margin: 0; 

padding: 0; 

font: bold lem Georgia, Times, serif; 

} 

#menu a{ 

text-decoration: none; 

color: #000; 

padding-left: 20px; 

background: url (dossier/imagel.png) left center no-repeat; 

} 

#menu a:hover, #menu a:focus{ 

background-image: url (dossier/image2.png) ; 

} 

On reconnait la forme raccourcie de la propriete background. Rappelons quelle 
donne dans l'ordre le chemin vers l'image (url), sa position (left center), et le 
mode de repetition (no- repeat ne fera afficher l'image qu'une seule fois, le compor- 
tement par defaut la multipliant selon un schema de damier). 

Lors du survol du lien par le pointeur de la souris, seul le chemin d'acces vers l'image 
de fond est affecte. Visuellement, on observera done un effet de changement tempo- 
raire d'arri ere -plan. La specification d'une marge interne a gauche (padding-left) 
evite au texte du lien de s' afficher par dessus la puce. 

Nous n'avons ici qu'effleure le sujet aborde dans le chapitre suivant, portant sur les 
images reactives et les menus graphiques dynamiques. 



Pour aller plus loin 



Listamatic est un site web en anglais entierement consacre a la conception de menus 
en CSS : http://css.maxdesign.com.au/listamatic/ Vous y trouverez de nombreuses ver- 
sions de menus verticaux, horizontaux, deroulants, et d'autres plus originaux encore. 

Alsacreations propose egalement une galerie de menus en CSS, principalement gra- 
phiques, pour vous aider a trouver l'inspiration : http://css.alsacreations.com/Galeries- 
de-menus-en-CSS 
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Application pratique 



<ul> 




<1 i ><a 


href="... 


<1 i ><a 


href="... 


<1 i ><a 


href="... 


<1 i ><a 


href="... 


<1 i ><a 


href="... 


<1 i ><a 


href="... 



II est temps de mettre ce chapitre en pratique pour ameliorer I'aspect du 
menu de notre projet de site web. Rappel du code actuel : 

'>Retour a 1 'accueil</ax/li> 

^Presentation de la region</ax/li> 

'>Historique de 1 'Alsace</ax/li> 

'>Castronomie local e</ax/li> 

'>H6tels et gites</ax/li> 

'>Photographies</ax/"li> 
</ul> 

<hlxa href="photos .htm" title="photos d'Alsace">Bienvenue en Alsace 
</ax/hl> 

<h2>Une belle region f rangaise</h2> 

<p>[Paragraphe associe au sous -tit re de niveau 2.]<a href="photos .htm" 
title="lien vers des photos d'Alsace"ximg src="image. png" 
alt="photographie" /x/ax/p> 
<h2>Un patrimoine considerable</h2> 

<p>[Deuxieme paragraphe associe au sous-titre de niveau 2.]</p> 
<p>Pied de page et <a href="...">Mentions legal es</ax/p> 



Au travail ! 

Les solutions, multiples, n'ont pour limites que votre imagination. La solution sui- 
vante produit le visuel de la figure 12-12 ; n'hesitez pas a la dissequer pour bien com- 
prendre son fonctionnement. 

ul { 

margin: 0; 

padding: 0; 

font: bold 0.8em Georgia, Times, serif; 

list-style-type: none; 

} 

li { 

float: left; 

} 

li a { 

display: block; 

width: llOpx; 

height: 30px; 

border: lpx solid black; 

color: green; 

background: #fc0; 
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margin: 3px; 

text-decoration: none; 

text-align: center; 

} 

"li a: hover, "li a: focus { 

color: orange; 

background: green; 

} 

hi {clear: both} 



Retour a 
Paccueil 


Presentation 
de la region 


Historique de 
PAlsace 


Gastronomie 
locale 


Hotels et gates 


Photographies 



Bienvenue en Alsace 



Une belle region francaise 



Paragraphe associe au sous-titre de niveau 2 




Un patrimoine considerable 

Deuxieme paragraphe associe au sous-titre de niveau 2 
Pied de page et Mentions legale s 



Figure 12-12 

Un menu decore 



13 

Images reactives 
et menus graphiques 



Les menus dynamiques (ou rollover) apportent de nouvelles possibilites d' expression. 
lis reposent sur les images reactives, capables de changer lors du passage du pointeur de 
la souris ou lors d'une navigation au clavier. Leur emploi demarquera notablement un 
site web de ses concurrents se limitant encore aux sages et classiques menus statiques. 



Une image reactive : premiere methode 

Pour mettre en place des images reagissant au survol par le pointeur de la souris, la 
plupart des concepteurs de site font appel au langage JavaScript et plus precisement a 
sa fonction onmouseover. Les bancs de creation semi-automatises souvent employes 
a ce genre de fins produisent des codes lourds, indigestes, difficiles a comprendre et a 
maintenir. N'oublions pas non plus que JavaScript est fonctionnel et active sur moins 
de navigateurs que CSS, ce qui pose des problemes d'accessibilite. Les chapitres 
anterieurs evoquent quelques techniques CSS proposant un certain nombre de fan- 
taisies dynamiques interessantes. Le tout dernier conclut par la mise en page d'un 
menu dote de puces reactives, changeant d'arriere-plan lorsque le pointeur de la 
souris survole leur element <a> - ils recourent pour cela a la pseudo-classe : hover. 
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Nous allons ici reprendre la meme technique, en remplacant les puces par des bou- 
tons. Contraints comme souvent par les bogues et limitations d'Internet Explorer, 
nous emploierons une balise <a> prealablement transformed en bloc pour recevoir des 
dimensions, et a laquelle nous associerons une image d'arriere-plan : 

HTML 

<a class="image" href="#"x/a> 



CSS 

a. image { 

display: block; 

width: lOOpx; 

height: lOOpx; 

background: url (imagel. png) no-repeat 0; 

} 

On attribuera evidemment a 1' element <a> les dimensions de l'image de fond (ici : 
une largeur et une hauteur de 100 pixels). On specifie cette derniere par la propriete 
raccourcie background, donnant dans l'ordre le chemin d'acces a l'image, son mode 
de repetition et sa position (0 la placant ici en haut a gauche). 

Le decor de la situation par defaut est plante. L'effet de survol sera assure en rempla- 
cant imagel par image2 lors du passage du pointeur de la souris, ce qu'on specifie 
dans un style portant sur 1' element <a> au moyen de la pseudo-classe : hover com- 
pleted par la pseudo-classe :focus pour la navigation au clavier : 

a. image: hover, a. image: focus { 
background-image: url (image2 .png) ; 
} 

Ces seules declarations suffisent a mettre en place une image reagissant au passage 
du pointeur de la souris. La derniere regie se cantonnant a l'instruction background- 
i mage, nous nous epargnons la repetition des autres caracteristiques, qui n'ont pas 
change. 



Accessibility de cette technique 

Dans la structure HTML, l'image reactive n'a pour trace qu'un simple element <a> 
<a class="image" href="#"x/a> 
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Rien n'indique ici une image (celle-ci n'est definie qu'en arriere-plan au moyen d'une 
propriete CSS). Cet element <a> vide ne trahit pas non plus clairement la presence 
d'un lien. Un tel code HTML vide de contenu sera ignore par les navigateurs 
vocaux, genant considerablement les non voyants. Sur les navigateurs graphiques ou 
CSS n'est pas actif, cette balise depourvue de contenu textuel sera dotee de dimen- 
sions nulles et sera done non cliquable. Tout cela interdirait l'emploi de cet element 
dans les composants de navigation essentiels du site. 

L'idee des textes de remplacement ne fonctionne pas : l'attribut al t ne porte pas sur 
1' element <a>. Quant a l'attribut title, il n'est obligatoirement pas pris en compte 
par les navigateurs vocaux. 

Tout cela impose de placer un texte de contenu dans cet element vide. Un message 
incomprehensible hors contexte serait ici une erreur naive ; il n'assisterait en rien les 
non voyants et ne leur permettrait pas de deviner a quoi sert ce lien : 

<a class="image" href="#">C"liquez sur "I 'image</a> 

On veillera done a ecrire une instruction autonome, digne de l'attribut alt des 
images (img) et decrivant la fonction du lien. Souvent, elle se contentera de reprendre 
le texte contenu dans l'image. Si l'image represents une enveloppe parce que le lien 
mene a la page de contact du site, le message suivant conviendra parfaitement : 

<a class="image" href="#">Contactez le webmaster</a> 

Voila un texte comprehensible par tous, notamment par les non voyants, Cependant, 
dans un navigateur graphique, il se superposera a l'image de fond qui jusque la se suf- 
fisait a elle-meme. Rappelons-nous les techniques evoquees pour le prechargement 
d'images : elles serviront ici encore a faire ignorer ce texte aux navigateurs graphiques 
sans le rendre invisible aux autres. On peut placer ce texte dans une balise masquee 
par la regie display: none: 

HTML 

<a class="image" href="#"xspan>Contactez le webmaster</spanx/a> 

CSS 

a. image { 

display: block; 

width: lOOpx; 

height: lOOpx; 

background: url (imagel.gif) no-repeat; 

} 
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a. image span { 
display: none; 
} 

Malheureusement, certains navigateurs non graphiques interpretent partiellement 
les styles CSS. Au lieu de restituer le contenu de 1' element <span> ainsi mis en place, 
ils en suivent les instructions de mise en forme et masquent son texte, ce qui n'est pas 
l'effet recherche. C'est l'association de plusieurs proprietes qui nous permettra de 
couvrir un large eventail de navigateurs. 

Placons i'element <span> contenu dans le lien hors de la zone visuelle de deux 
manieres distinctes : un positionnement absolu a -5000px en haut et a gauche et un 
text-indent decalant le texte a gauche. L'une au moins de ces instructions sera 
interpretee par la plupart des navigateurs non visuels : 

a. image span { 
position: absolute; 
left:-5000px; 
top: -5000px; 
text-indent: -5000px; 
} 



Etude Mettre un titre accessible en image 

Le billet suivant de Laurent Denis, grand specialiste en la matiere, explore les limites et possibility de ce 
theme : 

► http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image 



Temps de latence et prechargement 

Cette methode presente un inconvenient pratique : le temps de chargement de 
l'image de remplacement induit parfois une certaine latence lors du premier passage 
du pointeur de la souris sur l'image. Ce petit retard, dependant des donnees pre- 
sentes en cache, de la vitesse de connexion, de la reactivite du serveur a 1' autre bout 
de la ligne... pourra gener l'ergonomie et la souplesse d'utilisation de la page. 

Ce genre de details ne se manifeste qu'en production, echappant au designer deve- 
loppant un site web sur un ordinateur. En effet, le temps de chargement d'une image 
presente sur le disque dur local est negligeable devant les durees necessaires a l'eta- 
blissement d'une connexion web sur un serveur distant. 

Nous avons deja vu, au chapitre portant sur les prechargements d'images, quelques 
techniques evitant ces petits soucis. II en existe d'autres, qui fonctionneront tout 
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aussi bien (voire mieux) et sans necessiter de chargement prealable. Nous en presen- 
tons une ci-apres ; c'est celle qui nous servira a concevoir un menu graphique avec 
survol en CSS. 



Une image reactive : seconde methode 

La methode traditionnelle prevoit deux images pour chaque bouton de menu gra- 
phique, respectivement associees a son etat au repos et a son survol par le pointeur de 
la souris. II faut done produire deux images par bouton, soit dix images pour un 
menu de cinq liens. 

Cette nouvelle methode, dite des « portes coulissantes », n'utilise qu'une seule image, 
quel que soit le nombre de boutons du menu. Le principe de base consiste a faire 
coulisser l'arriere-plan entre l'etat de repos et l'etat actif. 



Ressource Methode des portes coulissantes 

[.'excellent site Pompage.net propose une traduction en francais de I'article original exposant la techni- 
que des portes coulissantes : 

► http://www.pompage.net/pompe/portescoulissantes2/ 
Cet article a fait I'objet d'un tutoriel sur le site Alsacreations : 

► http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique 



La technique des portes coulissantes simplifie a la fois le travail du graphiste (qui 
devra ne creer qu'une seule image) et celui du programmeur (nul besoin de prevoir un 
prechargement car tous les elements graphiques necessaires, au repos ou actifs, seront 
charges avec la page web). 

Commencons par un bouton simple (une image reactive qui sert de lien, large de 
150 pixels et haute de 40). La figure 13-1 le represente au repos ; la figure 13-2 
indique son aspect lorsqu'il se trouve sous le pointeur de la souris. 



Figure 13-1 

Bouton au repos 



Figure 13-2 

Bouton active par le 
passage du pointeur de 
la souris 



Travaux pratiques 

Troisieme partie 



Rassemblons ces deux etats dans une image unique, reprise figure 13-3, large de 
150 pixels et haute de 80 (les deux etats du bouton y sont en effet places Fun sur 
l'autre). II suffira alors d'en selectionner la bonne portion a tout instant. 



Figure 13-3 

Image cataloguant les 
etats possibles 




L'element <a> du lien recevra les dimensions d'un seul bouton : 150px par 40px. II 
suffira ensuite de jouer sur la position pour selectionner une portion de l'image 
d'arriere-plan et ne representor que le bon bouton, comme l'illustre la figure 13-4. 



Figure 13-4 

Les portes coulissantes 



Partie visible 



Etat au repos 



0,0 



0,40 



Etat au survol 




decalage de 
I'arriere-plan de 
-40px (vers le haut) 



Dans la pratique, on ecrit ceci : 

Au repos: 

background: url (image. jpg) no-repeat 0; 

Au survol : 

background-position: -40px; 

Quand la propriete background-position recoit la valeur -40px, cela deplace 
l'arriere-plan de 40 pixels vers le haut (les deux parametres correspondant respective- 
ment aux deplacements en abscisses et en ordonnees). C'est alors que la deuxieme 
partie de l'image, jusqu'ici masquee, entre en scene (schema de la figure 13-4). 



Reference Didacticiel pour images de fond accessibles 

Le site suivant reprend de maniere simple et concrete la technique des portes coulissantes pour creer des 
liens graphiques : 

► http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique 
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Culture Les formats d' image 

On trouve sur le Web trois formats d'image courants : GIF, JPEG, et PNG. 

GIF (Graphics Interchange Format), format de compression sans pertes limite a 256 
couleurs, ne convient pas pour des photographies ou illustrations contenant beau- 
coup de teintes ou des degrades, mais c'est le format le plus adapte aux logos et ima- 
ges simples. II propose egalement la transparence (version 89a) et les animations (un 
GIF anime empilant simplement plusieurs images). 

JPEG (Joint Photographic Experts Group), format de compression non conservative 
(c'est-a-dire detruisant certaines informations contenues dans I'image), accepte plu- 
sieurs milliers de couleurs (en 24 ou 32 bits). II est done ideal pour les photographies. 

PNG (Portable Network Graphics) est un format de compression sans pertes, libre et 
recommande par le W3C. II cumule les avantages de GIF (qualite, transparence) et de 
JPEG (compression, nombre de couleurs). Toutefois, il produit parfois une image un 
peu plus lourde que ces derniers, surtout lorsque le format (PNG8, PNG24, PNG32) 
n'est pas adapte au nombre reel de couleurs de I'image. 



Application a un menu graphique 

Ces idees fondamentales desormais maitrisees, passons a la vitesse superieure : 
Implication de cette methode a la conception d'un menu complet, comprenant six 
boutons independants. Meme si ces boutons different les uns des autres, tant au 
repos que sous le pointeur de la souris, une seule image suffira a l'ensemble du menu 
et a tous ses comportements. Reprenons la meme procedure dans le but d'obtenir le 
comportement presente figure 13-5. 



Figure 13-5 

Un menu graphique 
en CSS 




Travaux pratiques 

Troisieme partie 



Ce menu graphique occupera 300 pixels de large pour une hauteur globale de 
270 pixels. Chaque tranche de l'image s'y eclairera lors du passage de la souris. 

II convient de rassembler dans un seul fichier graphique l'ensemble des elements 
necessaires. Le plus simple est de placer l'une sous l'autre les deux versions com- 
pletes, sombre et eclaircie, de cette photographic II faut done prevoir pour cela une 
image de hauteur double (figure 13-6), 



Figure 13-6 

Image de fond pour le 
menu et son survol 




Cette image unique nous suffira. Au repos, seules les tranches de sa partie haute (les 
270 premiers pixels) seront reprises. Lors du passage du pointeur de la souris, 
l'arriere-plan du bouton correspondant sera decale en hauteur pour reprendre la 
bonne tranche eclaircie. 

Chaque lien ou bouton occupe ici une hauteur de 40 pixels. L'image sera done 
deplacee de -40px d'un bouton a l'autre, et de 270 pixels supplementaires (sa hauteur 
globale) pour les versions activees des tranches : -270px pour le premier, -310px pour 
le deuxieme, etc. Le code, donne ci-apres, est emaille de commentaires CSS places 
entre les memes separateurs qu'en langage C : /* texte du commentai re */. 
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Accessibility Les raccourcis clavier, ou accesskey 

Les raccourcis clavier (attribut accesskey) assistent les utilisateurs preferant naviguer 

sur le Web au clavier. Associer une frappe de touche a chaque partie importante du 

document (retour a I'accueil, formulaire de recherche, contacter le webmaster, etc.) 

leur permettra de s'y deplacer rapidement. 

Le site Acces-pour-tous synthetise tres clairement les differents moyens facilitant la 

navigation et developpe notamment I'utilisation de I'attribut accesskey : http:// 

acces-pour-tous. net/fichiers_communs/access.php?rub=aides_nav 

Le mode d'activation des raccourcis clavier depend du navigateur. Dans tous les cas, 

on les selectionne par la combinaison d'une touche passive generique (par exemple 

Maj) et du caractere accesskey correspondant a la destination desiree (par exemple 

le chiffre 0). 

Aucune norme ne synthetise les raccourcis clavier, mais la liste suivante, convention- 

nelle et recommandee, joue le role de standard de fait : 

: Politique d'accessibilite 

1 : Accueil 

2 : Contenu 

3 : Menu 

4 : Formulaire de recherche 
9 : Contact 

Evitez cependant de surcharger le document de raccourcis clavier : ils ne sont qu'une 
bequille qui ne saurait rendre accessible un document mal structure au depart. 



Ce menu est structure par une liste de liens non ordonnes (elements <u"l> et <1i>). 
Chaque lien <a> s'y differencie des autres par un identifiant <i d> repris dans la feuille 
de styles CSS. On emploie aussi I'attribut accesskey, qui facilite la navigation. 

HTML 

<u"l> 

<lixa id=""lienl" title="accueil du site" 

access key="l" href="#">Accuei"l</ax/"li> 
<lixa id=""lien2" title="presentation de la societe" 

href="#">Societe</ax/l i> 
<lixa id=""lien3" title="services proposes" 

h ref ="#">Se rvi ces</ax/1 i > 
<lixa id="lien4" title="les recrutements et carrieres" 

h ref ="#">Empl oi </ax/l i > 
<lixa id="lien5" title="acces a la societe" 

h ref ="#">PT an</ax/l i > 
<lixa id=""lien6" title="contactez-nous" 

access key=" 9" href="#">Contacts</ax/"li> 
</ul> 



Travaux pratiques 

Troisieme partie 



CSS 

ul , li { /* Supp 
des 
list-style-type: 
margin :0; 
padding:0; 
} 



ression des marges et des puces 
elements <ul> et <li> */ 
none; 



ul { 

position: absolute 

left: 20%; 



:e; /* Positionnement pour IE5 et IE5.5 */ 
/* Positionnement de 1 'element <ul> 

par rapport a la gauche du conteneur */ 
top: 50px; /* Positionnement de 1 'element <ul> 

par rapport au sommet du conteneur */ 
background: transparent url (image. jpg) top left no-repeat; 

/* Arriere-plan general du menu */ 
height: 270px; 
width: 300px; 
text-align: center; 
} 



/* Correction pour IE5 et IE5.5 */ 



li { 

display: inline; 

} 

li a { 

display: block; 

height: 40px; 

width: 300px; 

line-height: 40px; 

color: #E2C6BA; 

font-size: 18px; 

font-family: georc 

text-decoration : 

} 

li a: hover { 

color: #43271B; 

background: transparent url (image. jpg) top left no-repeat; 

} 



~gia, serif; 
none; 



a#lienl:hover { 
background-posi ti 

} 



on: 0% -270px; /••" Decalage de 1 'arriere-plan 
pour chaque bouton */ 
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a#"lien2 : hover { 

background-position: 0% -310px; 

} 

a#1ien3: hover { 

background-position: 0% -350px; 

} 

a#1ien4: hover { 

background-position: 0% -390px; 

} 

a#1ien5:hover { 

background-position: 0% -430px; 

} 

a#1ien6: hover { 

background-position: 0% -470px; 

} 

Ce menu fonctionne correctement sur la majorite des plates-formes et navigateurs 
actuels, a savoir : 

• Sous MS Windows : Internet Explorer 5, 5.5, 6 ; Mozilla Firebird et Firefox sous 
toutes leurs versions ; Opera a partir de sa version 6. 

• Sous Macintosh : Camino, Safari, Firefox et Explorer. 

• Sous GNU/Linux : Firefox et Konqueror. 

II nest pas compris par d'anciens navigateurs comme Internet Explorer 3 ou 
Netscape 4, qui ne prenaient pas encore en charge les proprietes CSS ici utilisees. 

Les adresses suivantes recourent a ces menus graphiques : 

► http://css.alsacreations.com/modelesmenus/g01 .htm 

► http://css.alsacreations.com/modelesmenus/g02.htm 



Travaux pratiques 

Troisieme partie 

Application pratique 

Notre projet de site web possede lui aussi une image sur la page d'accueil : 

<p>[Paragraphe associe au sous-titre de niveau 2.] 

<a href="photos.htm" title=""lien vers des photos d'Alsace"> 

<img src="image.png" a"lt="photographie" /> 

</a> 

</p> 

Nous vous proposons d'approfondir ce chapitre en dynamisant cette image : 
faites apparartre une autre image lorsque le pointeur de la souris la survolera. 
Montrez de la creativite ! 
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Creer un cadre arrondi 



Les divers blocs et boites HTML, constituants elementaires de la mise en page, sont 
par defaut rectangulaires done anguleux. Pour obtenir des fantaisies graphiques telles 
que des arrondis, il est necessaire de fabriquer des habillages sur mesure. 



Principe et methodologie 

La version 3 des CSS prevoira une propriete pour 1' arrondi des coins des blocs. Pour 
aboutir a ce genre d'effets et assurer la compatibilite sur tous les navigateurs, nous 
devons dans l'immediat recourir a diverses bidouilles. II s'agit simplement de doter 
d'une image de fond tout bloc de texte (<p>, <ch'v> ou autre) dont on souhaite 
arrondir les angles. 

Se pose evidemment la question de l'elasticite du bloc, susceptible de varier en hau- 
teur comme en largeur (selon le choix de police, la longueur du texte, le souhait du 
designer d'adapter la largeur de la boite a celle de la fenetre du navigateur, etc.). On 
sait pourtant que les images de fond, statiques et figees, ne peuvent pas s'etirer. 

Nous etudierons d'abord le cas d'un cadre de largeur fixe (et de hauteur variable) 
pour enchainer sur la situation plus complexe d'un cadre a deux degres de liberte. Les 
techniques employees different dans chaque situation. 



Travaux pratiques 

Troisieme partie 



Cadre de largeur fixe 

Le cadre de contour n'etant qu'un habillage graphique, aucune balise structurelle 
n'est specifiquement adapte a sa semantique. C'est pourquoi nous retiendrons l'ele- 
ment neutre <ch'v>, sans doute le plus approprie ici. L'objectif est d'obtenir le rendu 
de la figure 14-1. 



Figure 14-1 

Cadre graphique 
en CSS 



Lorem ipsum dolor sit arret, 
consectetuer adipiscing elit. 
Mauris temp us vulputate elit. 
Praesent hendrerit. Aliquam 
eleifend orci vitae nunc. 
Suspendisse accumsan quam 
non est. Vivarnus mi est, 
luctus eget, faucibus vitae, 
fermentum id , est. Duis nunc 
sem, adipiscing et, volutpat sit 
amet, tincidunt id, eras. Nam 
lacinia 

eras et metus. Nam a 
purus non lectus tincidunt 



J. 



La hauteur variable et non controlee de ce cadre interdit la solution simple d'une 
unique image de fond, incapable de s'etirer. Nous decoupons done (figure 14-2) 
l'arriere-plan en deux images complementaires : un chapeau pour la partie haute 
(figure 14-3) et un fond habillant le contenu et le pied du cadre (figure 14-4). 



Figure 14-2 

Preparation et decou- 
page du cadre 



C 



z\ 



Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Mauris temp us vulputate elit. 
Praesent hendrerit. Aliquam 
eleifend orci vitae nunc. 
Suspendisse accumsan quam 
non est. Vivamus mi est, 
luctus eget, faucibus vitae, 
fermentum id, est. Duis nunc 
sem, adipiscing et, volutpat sit 
amet, tincidunt id, eras. Nam 
lacinia 
eras et metus. Nam a 



Bloc div global 
(habillage haut) 

Bloc div interne 
(habillage bas et 
central) 
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Figure 14-3 

Partie haute du cadre 



r 



~\ 



Figure 14-4 

Partie basse du cadre 



Hauteur resile de I'image : 
500px minimum 



L'image d'arriere-plan de la figure 14-4 provisionne une hauteur suffisante et glissera 
verticalement pour accompagner le bloc de texte. Structure de l'ensemble : 

• Un bloc global (<div id="cadre">) contient l'ensemble du cadre (soit un bloc 
interne englobant a son tour le contenu). II a pour arriere-plan le chapeau de la 
figure 14-3. 

• Un bloc interne (<div id="bloccadre">) ne renferme que le contenu, avec pour 
fond la figure 14-4 glissant pour s'adapter a la taille reelle du cadre. 

• Un contenu, ici du texte (<p>). 

Une marge interne (padding) de la hauteur du chapeau et du pied evitera au contenu 
de deborder sur ces parties haute et basse du cadre. On obtient alors un code proche 
de celui qui suit : 

HTML 

<div id="cadre"> 

<div id="b"loccadre"> 
<p>Lorem ipsum dolor sit amet, ...</p> 
</div> 
</div> 

CSS 

div#cadre { /* conteneur global et chapeau de 1 'arriere-plan */ 

width: 230px; 

padding-top: 30px; 

background: url (haut .png) left top no-repeat; 

} 



Travaux pratiques 

Troisieme partie 



div#b"loccadre { /* bords et pied de 1 'arriere-plan */ 

background: url(bas.png) left bottom no-repeat; 

padding-bottom: 30px; 

} 

div#bloccadre p { 

margin: 30px 20px; 

} 



Variante : habillage d'un menu 

Cette technique convient parfaitement pour habiller un menu de navigation, qu'on 
codera comme a l'accoutumee sous forme d'une liste non ordonnee (<ul>) d'elements 
(<li>) correspondant a ses entrees. Appliquer a ces balises les styles desires produit 
alors le resultat de la figure 14-5. 

HTML 

<div id="cadre"> 

<div id="bloccadre"> 
<hl>Mon menu jo"li</hl> 
<ul> 

<lixa href="#" accesskey= 
<lixa href="#" accesskey= 
<lixa href="#" accesskey= 
<lixa href="#" accesskey= 
<lixa href="#" accesskey= 
</ul> 
</div> 
</div> 



'l">Lien l</ax/li> 
'2">Lien 2</ax/li> 
'3">Lien 3</ax/li> 
'4">Lien 4</ax/li> 
'5">Lien 5</ax/li> 



CSS 

body { 

font: lem black verdana, sans-serif; 

} 

div#cadre { /* conteneur global et chapeau de 1 'arriere-plan */ 

width: 230px; 

padding-top: 30px; 

background: url (haut .png) top left no-repeat; 

} 

div#bloccadre {/* bords et pied de 1 'arriere-plan */ 

background: url(bas.png) bottom left no-repeat; 

padding-bottom: 30px; 

} 
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div#b"loccadre p { 

margin: 30px 20px; 

} 

div#b"loccadre ul , div#bloccadre li { 

margin :0; 

padding:0; 

list-style: none; 

} 

div#bloccadre li { 

text-align: center; 

} 

div#bloccadre li a { 

color: black; 

text-decoration: none; 

} 

div#bloccadre li a:hover { 

text-decoration: underline; 

} 

div#bloccadre hi { 

font-size: 1.2em; 

text-align: center; 

margin :0; 

position: relative; 

top: -lem; /* decalage du titre vers le haut */ 

} 



Figure 14-5 
Habillage d'un menu 



Mon joli 


menu 


Lien 
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Lien 
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Lien 
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Variante : emploi des pseudo-elements before et after 

Les pseudo-elements : before et : after, prevues par la norme CSS 2, permettent de 
generer du contenu dans le document HTML depuis la feuille de styles CSS. Non 
reconnues par Internet Explorer, ces techniques seront employees avec circonspec- 
tion malgre leurs nombreux avantages (ce qui expliquent qu'elles soient releguees a la 
position de variante au lieu d'apparaitre comme la methode recommandee). 



Travaux pratiques 

Troisieme partie 



Variante La propriete -moz-border-radius 

Cette propriete ne releve pas de la norme CSS et seuls I'interpretent les navigateurs 

fondes sur Gecko, le moteur de rendu de Mozilla. En somme, c'est une astuce pro- 

prietaire introduce par un navigateur. 

Le W3C I'etudie et le brouillon de CSS 3 la mentionne. Tout porte done a croire que 

des proprietes semblables simplifieront a I'avenir la tache des designers web... quand 

elles seront enfin integrees dans la norme, programmers dans les navigateurs, et pre- 

sentes dans les navigateurs les plus repandus en pratique. 

Sans nous attarder sur cette propriete avant-gardiste (seule technique simple n'utili- 

sant aucune image pour arrondir les coins), illustrons son utilisation : 

HTML 

<p class="cadre">Texte de contenu</p> 

CSS 

.cadre { 
width: 300px; 
-moz-border-radius: 15px; 
background-color: #ddd; 
} 



En general, elles mettent en place des elements de decoration relevant de l'habillage 
plutot que du contenu editorial (texte ou image apparaissant lors du passage du poin- 
teur de la souris, puce devant un element de liste, etc.). CSS doit se limiter a creer des 
effets visuels non pertinents pour la navigation et la comprehension du contenu du 
document, faute de quoi les navigateurs n'activant pas les feuilles de styles et autres 
lecteurs d'ecran pour handicapes produiraient des resultats difficiles a comprendre. 

La mise en place d'un cadre arrondi respecte ces conditions : 1' absence de cet 
habillage graphique ne genera pas la consultation du document. II suffit alors de 
demander un chapeau arrondi avant le contenu (: before) et un pied arrondi a sa 
suite (: after). Voila qui simplifie considerablement le code : 

HTML 

<p class="cadre">Lorem ipsum dolor sit amet, ...</p> 

CSS 

p#cadre: before { 

content :url (haut. png) ; 

} 

p#cadre: after { 

content :url (bas .png) ; 

} 
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Reference Pseudo-elements :before et :after 

Le blog de Nanoum developpe tres clairement cette utilisation des pseudo-elements : before et 
: af te r, ainsi que d'autres techniques : 

► http://www.nanoum.net/blog/5_before_et_after.html 



Cadre elastique dans les deux dimensions 



II est plus delicat d'arrondir un cadre etirable a la fois en hauteur et en largeur. 
Aucune des nombreuses methodes possibles nest ideale ; nous n'en exposons ici 
qu'une seule. 



RESSOURCE Bilan sur les methodes de coins arrondis 

Toutes les techniques inventees pour la creation de cadres a coins arrondis sont 
recensees sur une page web en anglais : 

► http://www.smileycat.com/miaow/archives/000044.html 

En francais, on ne trouve qu'un rapide comparatif entre certaines methodes : 

► http://www.e-t1 72.net/articles/round/ 

C'est I'une d'entre elles que nous reprenons ici. 



Si Ton excepte la propriete -moz-border-radius et les pseudo-elements : before et 
: after, toutes ces methodes d'habillage polluent la semantique de la structure 
HTML par l'introduction de plusieurs elements <div> ou <img>. La regie de separa- 
tion entre le fond (HTML) et la forme (CSS) n'est plus respectee. 

Le compromis que nous proposons est Fun des moins mauvais. II s'agit de creer les 
quatre arrondis dans un programme de dessin puis de les placer un par un en position 
absolue, dans un conteneur lui-meme positionne relativement. 

Ces coins (presentes a la figure 14-6) relevant uniquement de la decoration et pas du 
contenu, nous prefererons recourir a l'element neutre <div> qua la balise <img>. 



Figure 14-6 

Les quatre coins 



Travaux pratiques 

Troisieme partie 



Pour assurer la bonne adaptation de leur couleur de fond a l'arriere-plan du docu- 
ment, le plus simple est de creer des images a fond transparent. L'objectif est de par- 
venir a l'habillage arrondi de la figure 14-7. 



Figure 14-7 

Cadre arrondi 




II faut prevoir quatre images distinctes, placees dans leurs coins respectifs, pour etirer 
le bloc en largeur et en hauteur. Elles seront placees en positionnement flottant, 
selon la structure generale representee figure 14-8. 



Figure 14-8 

Structure du cadre 
arrondi 



^exte de contenu 


t 


Texte de contenu 




Texte de contenu 




Texte de contenu 
1 


r 



Dans le code HTML, les coins droits sont places avant les coins gaudies. Ceci assure 
le bon fonctionnement de leur positionnement flottant : un element flottant est 
insere dans le flux puis pousse a droite ou a gauche dans le conteneur. Par conse- 
quent, il n'a d'effet que sur les freres qui le suivent dans la structure HTML. Pour le 
reste, ainsi que pour les styles CSS, vous devriez comprendre cette technique et pou- 
voir la reutiliser. 



HTML 

<div id="cadre"> 

<div id="hautdroit"></div><div id="hautgauche"></div> 

<div id="contenu"> 

<p>Texte de contenu</p> 

<p>Texte de contenu</p> 

<p>Texte de contenu</p> 

<p>Texte de contenu</p> 
</div> 

<div id="basdroit"></div><div id="basgauche"x/div> 
</div> 
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CSS 

body { 

font: lem black verdana, sans-serif; 

background-color: white; 

} 

#cadre { /* Taille du cadre, donnee a titre d'exemple */ 

width: 15em; 

background-color: #5F9E9D; 

} 

/* Proprietes communes aux quatre coins */ 

#hautgauche, #hautdroit, #basgauche, #basdroit { 

height: 19px; width: 19px; 

background-repeat: no-repeat; 

font-size:lpx; /••" correction d'un bogue d'lE */ 

} 

/* Proprietes specifiques a chaque coin */ 

#hautgauche { 

background-image: url (hautgauche.png) ; 

} 

#hautdroit { 

float: right; 

background-image: url (hautdroit .png) ; 

} 

#basgauche { 

background-image: url (basgauche.png) ; 

} 

#basdroit { 

float: right; 

background-image: url (basdroit. png) ; 

} 

#contenu p { 

color: white; 

margin: 0.5em; /••" Cestion des espaces entre les paragraphes */ 

} 



Travaux pratiques 

Troisieme partie 



Application pratique 



Appliquons les preceptes de ce chapitre pour remodeler le projet de site alsa- 
cien. Actuellement, son menu est affiche de maniere horizontale et sous forme 
de boutons. 

Reprenons-en la structure HTML et les regies CSS pour en faire un menu vertical 
entoure d'une bordure graphique. 

Grace au chapitre que vous venez de lire, vous avez toutes les cartes en main ! 



QUATRIEME PARTI E 



Mise en ceuvre 
dans un projet 
professionnel 



Dans cette derniere partie, nous nous proposons de revenir sur le chemin par- 
couru et les applications pratiques presentees pour concevoir un projet global, 
sous la forme d'un site web de qualite professionnelle. 
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Methodologie generate 



Chacun des quatre chapitres suivants portera sur une etape precise du projet. Dans 
cette introduction, nous nous contenterons de nous pencher sur les diverses techni- 
ques assurant une compatibilite maximale, sur la liste des points a controler avant 
d'attaquer une mise en page, et sur la presentation du projet a proprement parler. 



Un site compatible avec tous les navigateurs 

Nous l'avons signale a de nombreuses reprises : malgre leur importance fondamen- 
tale, les standards developpes par le W3C (et en particulier CSS) sont loin d'etre 
parfaitement pris en charge et respectes, meme par les programmes les plus recents. 
Quand, a l'image d'Internet Explorer, ils n'interpretent pas a leur guise certaines pro- 
prietes, les navigateurs ont besoin de temps pour prendre en charge les derniers stan- 
dards. 

Un debutant mal informe des diverses astuces assurant une certaine compatibilite 
malgre les bogues et problemes des divers navigateurs peinera a produire un site web 
exploitable. C'est la raison d'etre de cette methodologie, voie a suivre pour creer des 
documents fonctionnant au mieux partout, et que nous respecterons notamment 
dans le projet au cceur de cette derniere partie. 
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Un travail en trois etapes et tester sous tous les navigateurs 

Pour que nos documents web s'affichent correctement sur la plupart des navigateurs, 
nous nous conformerons a une methode en trois etapes : 

1 Etablir une structure (HTML ou XHTML) claire, fonctionnelle meme nue. Un 
document web se doit en effet d'etre lisible sans mise en forme (CSS), scripts 
(JavaScript) ou plug-ins (Flash). On respectera les principes fondamentaux expo- 
ses sur le billet de blog http://blog.alsacreations.com/2004/06/28/33-principes-fonda- 
mentaux, selon lesquels un bon code HTML se doit d'etre propre, comprehensi- 
ble, simple, pertinent, accessible. On controlera la grammaire (X)HTML des 
documents produits avec le validateur du W3C. 

2 On passe ensuite a la mise en page generale, en ecrivant des styles CSS conformes 
aux standards du W3C et en testant regulierement le document sur les naviga- 
teurs qui respectent le mieux ces normes (par exemple Firefox, Opera, Safari). 
Tous les validateurs syntaxiques automatiques (CSS et accessibilite, mentionnes 
dans l'annexe) devront etre satisfaits. 

3 C'est le moment de composer avec les mauvais eleves (Internet Explorer et les 
anciens navigateurs). On devra pour cela simplifier les CSS, recourir a certaines 
bidouilles, ou ignorer les soucis de leurs utilisateurs (tant que le public veritablement 
cible par le projet est satisfait). II n'est pas toujours possible de s'adapter a la fois aux 
navigateurs antiques et aux exigences d'accessibilite posees par les handicaps. 

Les validations syntaxiques automatiques, meme assurees par le W3C, ne forment 
qu'une condition necessaire ne garantissant pas un affichage identique partout. 
Chaque navigateur presente ses propres bogues et specificites, comme la taille par 
defaut des marges. 

Les outils suivants vous permettront de tester le site web sur certains navigateurs ou 
plateformes pas toujours faciles a se procurer : 

• Tester son site web sous Mac (Safari) : 
http://www.browsrcamp.com/ 

• Tester son site sous Lynx (navigateur en mode texte) : 
http://www.delorie.com/web/lynxview.html 

• Versions autonomes d'Internet Explorer pour toutes plates-formes : 
http://tredosoft.com/Multiple_IE 

• Tester son site sur assistant numerique personnel Palm : 
http://www.palmos.com/dev/tools/simulator/ 
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Methodologie de correction de bogues 

Les navigateurs actuellement utilises ne sont pas toujours les plus recents ni les plus 
conformes aux standards du W3C. II est done probable que certains d'entre eux pre- 
sentent des rendus assez surprenants, meme si votre structure HTML et vos styles 
CSS sont parfaitement en regie. 

Isoler les bogues d'affichage 

Un bogue d'affichage est du en general a des incompatibilites de navigateurs ou a des 
marges (margin, padding) par defaut differentes selon les navigateurs. 

La premiere etape a suivre est d'isoler les elements qui ne se comportent pas comme 
vous l'aviez prevu. Pour cela, trois techniques differentes permettent, grace aux styles 
CSS, de localiser les elements problematiques : 

• l'ajout d'une couleur d'arriere-plan ; 

• le masquage des elements un par un ; 

• la suppression de toutes les marges par defaut. 

Appliquer une couleur d'arriere-plan 

Cette etape permet de localiser les eventuels problemes de marges ou de fusion de 
marges. C'est un phenomene qui se presente lorsque deux elements de type bloc sont 
places selon le flux normal, l'un sous 1' autre. Dans ce cas, les marges haute et basse 
fusionnent et la marge finale prend la plus grande des deux valeurs... ce qui cause 
parfois des decalages verticaux. 

Pour faciliter votre recherche, il est conseille de colorer l'ensemble des elements prin- 
cipaux en leur appliquant une couleur d'arriere-plan differente. 



Reference Fusion de marges 

Voici un lien expliquant en detail les problemes de fusion de marges : 
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html 



Masquer les elements un par un 

Parfois, il ne suffit pas de distinguer l'element pour comprendre le probleme pose. II 
se peut que l'element provoque des decalages ou autres influences « a distance ». 

Dans le meme ordre d'idee que la technique precedente, il peut etre interessant de 
masquer tous les elements, un par un, pour determiner avec certitude lequel est en 

cause. 
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Pour cela, appliquons un display : none successivement sur chaque element 
(nomme en general par un id ou une classe). Cette procedure sera certainement 
longue car elle necessite un tatonnement au cas par cas, mais elle se revele efficace. 

Supprimer toutes les marges par defaut 

Toutes les balises de type bloc (sauf <div>) possedent des marges internes (padding) 
et externes (margin) par defaut. Le probleme est que cette valeur par defaut varie 
d'un navigateur a l'autre et provoque des rendus differents. II s'agit certainement de 
l'explication la plus courante lorsque des decalages apparaissent entre les diverses 
plates-formes. 

Le meilleur moyen d'identifier un probleme de marges sur certains elements est de... 
supprimer toutes les marges de tous les elements. Le principe est d'utiliser le selec- 
teur universel (*), qui s'appliquera a toutes les balises, et de mettre les marges a zero : 

* {margin: 0; padding: 0;} 

Commencez votre feuille de styles par cette declaration. Si les decalages involon- 
taires disparaissent, vous aurez detecte un probleme de marges par defaut. A vous 
ensuite d'isoler 1' element qui provoque ce decalage. 

Internet Explorer et le Haslayout 

La notion de « haslayout » (qui possede le « layout ») est assez particuliere et ne con- 
cerne que le navigateur Internet Explorer. Le layout a ete invente par Microsoft pour 
conferer certaines caracteristiques a un element. Ce concept est inherent a ce naviga- 
teur et n'existe pas sous la forme de propriete ou regie CSS. 

Selon Internet Explorer, un element possede le layout (haslayout) ou ne le possede 
pas. Certains elements sont dotes de layout par defaut: <table>, <td>, <body>, 
<img>, <hr />, <input>, <select>, <textarea>, <button>, <object>, <applet>... 
Donner le layout aux elements qui ne le possedent pas par defaut corrige de nom- 
breuses incoherences sur IE : des decalages de fiottants, des espaces au sein des listes 
et des problemes de positionnement en general. 

II existe plusieurs methodes pour donner le layout a un element : 

• heigth : valeur (par exemple heigth : 1%); 

• zoom : valeur (par exemple zoom : l) ; 

• width : valeur ; 

• float : 1 eft ou float : right; 

• position : absolute (attention aux consequences) ; 

• display : inline-block (ne fonctionne pas sur Firefox 2 et versions inferieures). 
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Afin de n'appliquer ces methodes qu'au navigateur Internet Explorer, il est vivement 
conseille d'employer les commentaires conditionnels. 



Reference Concept de Haslayout 

Voici une explication detaillee du concept de Haslayout : 
http://www.test.blog-and-blues.org/haslayout/trad_temp.html 



Les commentaires conditionnels 

Tous les navigateurs, selon leur anciennete ou leur degre de conformite aux stan- 
dards, ne prennent pas en charge les proprietes CSS de la meme maniere. Certains 
presentent des bogues d'interpretation, Quelques-uns reconnaissent les dernieres 
nouveautes en CSS2, d'autres non. 

Un hack est une technique pour eviter ces problemes et permettre a ces navigateurs 
defectueux d'aboutir a nos fins, soit en detournant une propriete de son usage, soit en 
utilisant des codes supplementaires pour pallier les manques. 

Cependant, au fur et a mesure de revolution du navigateur, celui-ci devient de plus 
en plus conforme aux standards et les anciens hacks utilises deviennent obsoletes. 
Ainsi, depuis l'arrivee d'IE7, beaucoup de hacks appliques pour IE6 sont devenus 
inoperants car corriges. Les concepteurs web ont du reprendre un par un tous leurs 
hacks pour convenir a la nouvelle version. 

Pour remedier a ce probleme, il existe une solution plus robuste et plus perenne : les 
commentaires conditionnels. II s'agit d'un mecanisme propre a Internet Explorer 
Windows, qui permet d'inclure dans une page HTML, de maniere valide, du code 
qui ne sera lu et interprete que par IE, ou par l'une ou 1' autre de ses versions. 

Les commentaires conditionnels se presentent comme des instructions dotees d'une 
condition (i f ) et qui se placent dans l'en-tete du document (X)HTML (au sein de 
l'element <head>). 

La syntaxe la plus simple est la suivante : 

HTML 

<!--[if IE]> 

ici votre code HTML reserve a IE 

<! [endif] --> 
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L'interet est de pouvoir cibler quelles versions d'Internet Explorer devront suivre ces 
commentaires conditionnels : 

HTML 

<!--[if gte IE 5]> pour reserver le contenu a toutes les versions 

superieures a IE 5.0 <! [endif]--> 

<!--[if IE 5.0]> pour IE 5.0 uniquement <! [endif] --> 

<! — [if IE 5.5000]> pour IE 5.5 <! [endif] --> 

<! — [if IE 6]> pour IE 6.0 <! [endif]— > 

<!— [if gte IE 5.5000]> pour IE5.5, IE6.0 et IE7.0 <![endif]--> 

<! — [if It IE 6]> pour IE5.0 et IE5.5 <![endif]— > 

<!— [if lte IE 6]> pour IE5.0, IE5.5 et IE6.0 mais pas IE7.0<! [endif] --> 



Void par exemple comment appliquer la regie zoom 
uniquement sur IE6 : 

HTML 

<! — [if IE 6]> 

<style> 

.donnelayout { zoom: 1; } 

</style> 

<! [endif] --> 

ou 
HTML 



1 a la classe . donnelayout 



<! — [if IE 6]> 

<1ink reWstylesheet" href="styles_ie. ess' 

<! [endif] --> 



type="text/css" /> 



Reference Les commentaires conditionnels 

Voici quelques ressources de reference concernant les commentaires conditionnels et leur mise en oeuvre : 

► http://forum.alsacreations.com/faq/faq-53-Qu039est-ce-que-les-commentaires-conditionnels-.html 

► http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows 

► http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp (anglais) 



Mise en page de base ou gabarit 

Revenons a present a notre projet de conception complete en XHTML/CSS. 

Tout projet web professionnel commence par l'etablissement d'un cahier des charges, 
qui mentionnera au moins les trois ensembles d'elements indispensables a la concre- 



tisation d'un site : 
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• aspects techniques (hebergement, nom de domaine, mises a jour, etc.) ; 

• aspects fonctionnels (navigation, contenu, ergonomie du site, typographic, puces, 
etc.) ; 

• aspects visuels (disposition des elements, couleurs, illustrations, typographic, 
puces, etc.). 

Cette derniere partie se penchera surtout sur les aspects fonctionnels et visuels. 
Avant tout, il faut ne rien oublier d'important. 

Apres la reflexion sur le contenu et sa disposition et avant de construire le gabarit, il 
convient de faire un bilan des points essentiels. La mise en page dependra des 
reponses apportees a un certain nombre de questions ; ce moule accueillera ensuite 
naturellement son contenu. Avant de vous plonger dans la programmation HTML, 
prenez done soin de clarifier les aspects suivants : 

• Largeur adaptable ou fixee ? Dans le cas d'une largeur imposee, le document sera- 
t-il centre dans le navigateur ? 

• Presence d'un chapeau de page systematique (header) ? 

• Presence d'un pied de page systematique (footer) ? 

• Combien de menus de navigation sont prevus ? 

• Sur quels cotes les menus de navigation seront-ils affiches, et dans quelle direc- 
tion (verticalement ou horizontalement) ? 

• Malgre les risques poses en matiere d'accessibilite, un menu deroulant est-il 
prevu ? 



Presentation du projet professionnel 



Jusqu'a la fin de l'ouvrage, nous construirons peu a peu une page web complete, ecrite 
en XHTML et mise en forme grace aux styles CSS. Le resultat final est presente 
figure 15-1 ; nous y reviendrons regulierement. II est egalement repris a l'adresse 
http://www.alsacreations.com/livre, ou il joue le role de vitrine du present manuel. 

Cette zone web remplira toutes les fonctions que Ton est en droit d'attendre d'un site 
d'accompagnement de livre, prolongeant le dialogue avec ses lecteurs. II apportera 
des informations supplementaires, proposera des extraits de l'ouvrage, ses codes et 
illustrations, maintiendra une liste d'errata, etc. N'hesitez done pas a l'inclure dans 
vos signets ! 

II s'agit d'une charte graphique legere et fraiche, disposant neanmoins ses elements de 
maniere simple et classique : logo et titre dans l'en-tete, menu de navigation a gauche, 
partie centrale de contenu et petit encart mentionnant les dernieres nouveautes. 
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Figure 15-1 

Le projet termine 



Les chapitres suivants se pencheront tour a tour sur la structuration de l'en-tete 
(header) ; sur celle des elements de navigation ; sur le contenu general (titres, textes, 
encart), pour enchainer sur les styles CSS employes dans ce projet. 

Nous avons fait les choix suivants : 

• Ce site web, de largeur variable, s'affichera dans toutes les resolutions d'ecran a 
partir de 800 pixels par 600. Les zones de contenu et d'en-tete s'adapteront auto- 
matiquement a la largeur de la fenetre du navigateur. Le menu sera de largeur fixe 
mais s'adaptera a la taille de police (ses dimensions etant precisees en em). 

• L'en-tete reprendra l'identite graphique du site, le logo Alsacreations, ainsi que le 
titre general de l'ouvrage presente. Un pied de page n'est pas necessaire. 

• Plusieurs menus de navigation sont prevus : un sommaire general vertical a gau- 
che du site et un menu horizontal « rapide » dans l'en-tete, facilitant l'acces direct 
aux liens importants (retour a l'accueil, page de contacts, etc.). 

• Nul besoin d'un menu deroulant, mais chaque menu reagira au passage du poin- 
teur de la souris. 
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En-tete du document 



La page web du projet debutera par un en-tete (header) sous la forme d'un bandeau 
graphique avec le titre du site, un sous-titre et une illustration. II devra s' adapter a 
toutes les resolutions d'ecran tout en restant accessible au plus grand nombre (sans 
oublier les non voyants). Quadrature du cercle ? 



Decoupe et preparation 



Un astucieux decor 

Le fond de l'en-tete (presente figure 16-1) est une banale image de 800 pixels par 
100, appliquee sans repetition en arriere-plan d'un bloc <ch'v>. Une couleur de fond 
de raccord (qu'on peut cumuler en CSS avec une image de fond) assurera la bonne 
tenue de l'ensemble pour les resolutions superieures. 



^ ^Alsa creations 



Figure 16-1 Image de fond de l'en-tete 
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Contenu de I'en-tete 

Le bandeau d'en-tete contiendra de plus les elements suivants : 

• « Alsacreations, le livre ». Ce titre de document, peu visible dans les environne- 
ments graphiques, represente une information essentielle pour les navigateurs 
incapables de restituer les images, comme les lecteurs d'ecran. 

• Un slogan rappelant le titre (provisoire) du livre, par exemple « Concevoir des 
sites web avec HTML et CSS ». 

• Une image de grimoire (figure 16-2) surplombant l'arriere-plan general et collee 
a droite de son conteneur quelle que soit la resolution d'ecran. Elle a un fond 
transparent destine a s'adapter a l'arriere-plan du bandeau. 

Figure 16-2 

Le grimoire de 
fin d'en-tete 



Realisation pratique 

II est temps d'implementer nos desirs en HTML et CSS. Dedaignant l'angoisse de 
la page blanche, creons un nouveau document XHTML et plongeons dans le code... 

Structure du document 

On travaillera dans un editeur de texte. HTML-Kit (http://www.chami.com/html-kit/ 
download/) est agreable, mais tous feront 1' affaire. Meme le fruste Notepad pour 
Windows pourra depanner les designers temporairement depourvus d'outil plus effi- 
cace. Un programme puissant capable de colorer syntaxiquement le code HTML 
mettra en evidence de nombreuses etourderies en differenciant clairement le texte 
des balises, c'est-a-dire le contenu, de sa structure HTML. 

Nous l'avons vu dans les premiers chapitres, une page (X)HTML se compose d'un 
doctype suivi d'un element racine (<htm"l>). Ce dernier se divise en deux fils : <head> 
(renfermant 1' element <meta> qui rassemble toutes les meta-informations du docu- 
ment) et <body>, racine du contenu. Nous prendrons pour canevas la structure type 
suivante : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 
<head> 
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<title>Alsacreations , le livre</title> 
<meta http-equiv="Content-Type" 

content="text/html ; charset=iso-8859-15" /> 
<link rel="stylesheet" type="text/css" href="styles. ess" 

media="screen" /> 
</head> 
<body> 
</body> 
</html> 

Certains elements y sont deja renseignes : <title> comporte le texte « Alsacreations, 
le livre » ; l'element <link> important la feuille de styles externe styles. ess. Nous 
nous pencherons un peu plus tard sur la mise en page et 1'habillage graphique et cree- 
rons alors ce fichier. 

Structure de Pen-tete 

Les divers elements du bandeau superieur seront rassembles dans un conteneur. 
L'element <div> est tout indique ; attribuons-lui l'identifiant unique header. Cette 
etiquette facilitera la creation d'un lien vers le haut de page : 

<body> 

<div id="header"> 

</div> 

</body> 

Passons au contenu, et placons ses elements dans un ordre encore comprehensible en 
l'absence de mise en page CSS : le grimoire du bandeau, le titre principal <hl>, le 
paragraphe de slogan. 

<div id="header"> 

<img src=""livre.png" alt="livre illustratif" /> 

<hl>Alsacreations, le livre</hl> 

<p>Concevoi r des sites web modernes avec HTML et CSS</p> 

</div> 



Methode Selectionner en utilisant I'arborescence 

On pourra selectionner tous les elements de ce bloc de par leur type et leur position hierarchique ; inutile 
done de leur donner a chacun une classe ou un identifiant. Par exemple, l'element <p> du bloc header 
sera designe en CSS par le selecteur suivant : 

#header p 
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Le bandeau a desormais Failure de la figure 16-3. 



Figure 16-3 

En-tete sans mise 
en forme 




Alsacreations, le livre 



C once voir des sites web mo denies avec HTML et CSS 



Mise en forme CSS 

Des styles permettront d'obtenir l'habillage graphique souhaite. Creons le fichier 
styles. ess, feuille de styles globale du site web. Nous y rassemblerons toutes les 
declarations de mise en forme. 

Une premiere regie, portant sur i'element <body>, concernera toutes les pages du 
document. Les styles suivants suppriment les marges, optent pour un fond blanc et 
definissent la famille et la taille de police par defaut : 

body { 

margin: 0; 

padding: 0; 

background: white; 

color: black; 

font-size: 80%; 

font-family: "Bitstream Vera Sans", Verdana, Arial , Helvetica, serif; 

} 

Style du conteneur general 

Pour affubler le bloc <div id="header"> de l'image d'arriere-plan presentee figure 16- 
1, on y precisera la propriete raccourcie background definissant couleur de fond, image 
de fond, sa position et son mode de repetition. II aura la meme hauteur que l'image 
(lOOpx) et en tant que bloc, occupera par defaut toute la largeur disponible. 

#header { 

height: lOOpx; 

background: #97C05F url (banniere. jpg) top left no-repeat; 

} 
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Style de I'image decorative 

Le grimoire symbolisant le manuel prendra place a droite du bandeau, quelle que soit 
la dimension de la fenetre. Deux methodes pertinentes sont possibles : 

• Positionner absolument, avec les proprietes right et top, la balise <img> situee 
dans l'element d'identifiant header. 

• Positionner cet element <img> en flottant avec la propriete float, l'instruction 
margin decalant I'image ou souhaite. 

La seconde, plus proche du flux, aura notre preference, et le document restera com- 
prehensible en l'absence de styles : 

#header img { 

float: right; 

margin: 5px 5px 0; 
} 

Style du titre general 

Le titre « Alsacreations, le livre » ne doit etre pris en compte que par les navigateurs 
incapables de restituer les graphiques, car I'image de fond propose deja le titre 
« Alsacreations ». 

Des diverses methodes etudiees pour cacher du contenu aux navigateurs graphiques 
sans trop gener les autres, nous retiendrons ici la declaration text-i ndent : -5000px. 
Rappelons quelle engendre un retrait a gauche « poussant » le titre hors de la zone de 
vision. 

Tous les elements de type bloc, a l'exception de <div>, possedent par defaut des 
marges internes et/ou externes differentes d'une navigateur a 1' autre. C'est notam- 
ment le cas de <hl>. Laisse en l'etat, il induirait des decalages dependant du naviga- 
teur. Supprimons toutes ses marges; annulons aussi la hauteur de ligne (line- 
height) pour eviter tout decalage avec l'element <p> suivant. 

#header hi { 

text-indent: -5000px; 

margin :0; 

line-height: 0; 
} 
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Style du slogan 

Un paragraphe place comme les autres dans le flux, positionne grace aux marges, 
avec une police blanche et grasse de 1 . lem, done un peu plus grande que la taille par 
defaut de 1' element body, renfermera le slogan. 

Ce bloc sera place par rapport au dernier element du flux (le titre <hl>), a 45 pixels 
du haut et 200 pixels du cote gauche. Ceci ne prend pas en compte son decalage pro- 
voque par text-indent. Rappelons l'interpretation du raccourci margin : les quatre 
cotes pris dans le sens horaire en partant du haut. 

#header p { 

margin: 45px 200px; 

font-weight: bold; 

color: white; 

font-size: l.lem; 
} 

Cette premiere etape aboutit ainsi sur l'ebauche de la figure 16-4 : un haut de page 
avec bandeau d'arriere-plan et divers elements. 



J\lsa creations 

"V Concevoir des sites web avec HTML et CSS 



Figure 16-4 

En-tete finalise 



Tous les elements suivant le flux courant, ce document reste lisible meme sans mise 
en forme CSS (ce dont vous vous assurerez en supprimant la ligne de code mention- 
nant la balise <1 i nk>). On garantit ainsi un acces a tous au site web, qu'on ne reserve 
pas aux seuls navigateurs graphiques. 

Apres une reflexion sur les differents moyens de navigation, nous mettrons en place 
les deux menus. 
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Concevoir les 
elements de navigation 



Cles de voute d'un site web, le menu et autres moyens de navigation aideront vos 
visiteurs a trouver rapidement l'information qu'ils recherchent. S'ils ne trouvent pas 
leur ergonomie coherente et claire, leur frustration les dissuadera de revenir. 



Les moyens de navigation 

Considerez d'un oeil critique les sites de vos signets favoris. Chacun est articule diffe- 
remment, de par les systemes de navigation qu'il propose. Certains preferent des 
menus horizontaux ou verticaux ; d'autres ajoutent des outils (champ de recherche, 
plan du site). Multiplier ainsi les angles d'attaque dote un site d'atouts supplemen- 
taires, car chaque utilisateur apprehende les situations differemment. 

Penchons-nous sur les techniques qui faciliteront la vie de vos hotes. 
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Le menu general 



Sommaire global menant a toutes les sections du site, c'est le « menu de navigation ». 
On le trouve presque partout et sous toutes les formes : textuelle ou graphique avec 
images, puces ou onglets ; affiche verticalement ou horizontalement, etc. 

Le plan du site 

Organigramme complet, il decrit en une page la structure generale du site, souvent 
sous une forme arborescente. II est particulierement indique pour les sites riches en 
themes et en pages ainsi qu'en complement de termes obscurs ou peu parlants dans le 
sommaire general. 

Un moteur de recherche 

C'est un moyen de navigation essentiel dans un site riche en contenus (boutique en 
ligne, site d'information, etc.) Libere des contraintes de navigation imposees par les 
liens, menus et sous-menus, le visiteur mentionne directement les mots-cles qui 
l'interessent. II gagne ainsi un temps precieux. 

Les acces rapides 

Les liens d'acces rapide sont des raccourcis vers quelques pages jugees importantes : 
accueil, contacts, etc. lis sont souvent mis en evidence en haut de document. Ce sont 
des points de repere globaux pour le site. 

Les liens d'evitement 

Raccourcis ciblant les handicapes, notamment les non-voyants, ils menent des le 
chargement de la page a la partie recherchee (contenu, menu general, moteur de 
recherche, etc.). Les lecteurs d'ecran et outils similaires retranscrivent le contenu au 
fil du flux du document. Les liens d'evitement, places en debut de page, epargneront 
au visiteur les parties qui l'interessent moins. Ce sont des points de repere propres a 
une page web donnee. 

Un fil d'Ariane 

Cet historique de navigation rappelle en permanence la position actuelle sur le site en 
ouvrant un acces direct aux autres pages deja visitees. Lutilisateur evite ainsi des 
manipulations longues ou fastidieuses. Semer de tels petits cailloux blancs servira 
plus particulierement dans les dedales grouillant de themes. 
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Une Foire aux Questions (FAQ) 

La Foire aux Questions (Frequently Asked Questions) recense (ou anticipe) les ques- 
tions les plus frequentes et les transforme en liens vers la page de leur reponse. 

Cet outil complete le moteur de recherche : les questions posees par les visiteurs peu 
experimentes, classees par theme, y recoivent des reponses detainees et adaptees. 
Excellente introduction a un nouveau site, il prepare a 1'utilisation du champ de 
recherche, au potentiel bien plus vaste. 

Le retour en haut de page 

II est pratique de rythmer les pages longues et fournies des sites de cours et autres 
documentations par des reperes ramenant en haut de document. C'est particuliere- 
ment utile pour butiner des parties choisies d'un texte consequent, preface par une 
table des matieres (comme une FAQ). 

Le retour vers le haut de page prend la forme d'un lien hypertexte vers l'element 
parent du document, <body>. Dans les versions strictes de HTML et XHTML, on 
remplacera 1' obsolete propriete name par un identifiant unique applique a la balise 
visee. 

Exemple : 

HTML 

<body id="haut"> 

<a href="#haut">retour en haut de page</a> 

Pour cet usage particulier, la plupart des navigateurs (mais pas Opera) proposent la 
formule plus concise # : 

<a href="#">retour en haut de page</a> 

Les liens internes, les ancres 

Cette technique est recommandee a partir d'une taille critique de contenu correspon- 
dant a trois ecrans de resolution 1024 par 768 pixels (voir le referentiel ADAE du 
site BrailleNet : http://braillenet.org). Des liens internes a la page, ou « ancres », sont 
alors d'un grand confort : ils permettent d'atteindre directement les differents titres 
de sections ou des paragraphes precis. 
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Cette methode generalise l'idee precedents car des liens internes pourront cibler 
n'importe quel element HTML, en particulier les intertitres <hl>, <h2>, etc. 

HTML 

<a href="#proprietes">a"ner a la "liste des proprietes CSS</a> 

<h2 id="proprietes">Liste des proprietes CSS</h2> 
<p>Lorem ipsum dolor sit amet, ...</p> 



Un menu thematique 

Ce systeme de navigation tres innovant et assez peu repandu ameliore les presenta- 
tions par themes en permettant de consulter successivement des articles apparentes, 
sans manipulation fastidieuse intermediate. II consiste a donner sur chaque page une 
liste de liens menant vers des documents annexes ou connexes. 

Prenons l'exemple d'un site dedie a 1'informatique. Le premier document renvoye par 
une recherche portant sur les DVD reinscriptibles ne satisfait pas le visiteur. Un 
menu thematique pointant vers les autres articles traitant de DVD (independam- 
ment de leur position dans l'organigramme du site) lui evitera de recommencer sa 
recherche. 



Remerciements 

Cette premiere partie est largement inspiree des remarques et idees de Dominique, 
moderateur actif des forums World-lnformatique et Alsacreations, que je tenais a 
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► http://forums.world-informatique.com/ 

► http://forum.alsacreations.com 



Realisation pratique 

Le site web projete comporte : 

• des liens d'acces direct dans un menu horizontal pour revenir a l'accueil, contacter 
l'auteur, et se rendre a l'espace prive ; 

• un menu general, vertical, place a gauche ; 

• un formulaire de recherche incorpore sous le menu general. 
Comment concevoir ces divers elements de navigation ? 
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Le menu horizontal 

Le menu horizontal d'acces rapide, situe directement sous le bandeau d'en-tete, 
prend la forme d'une ligne de liens blancs sur fond noir (figure 17-1). 



Figure 17-1 

Le menu rapide 
horizontal 



Retour a I'accueil - Contacts - Espace pr 



Le chapitre dedie aux menus recommande de structurer ceux-ci sous forme d'une 
liste non ordonnee. Faisons suivre le bloc header d'un bloc de liste (<u"l>) intitule 
menuhaut : 



<div id="header"> 

<img src=""livre.png" a"lt=""livre illustratif" /> 

<hl>Alsacreations , le livre</hl> 

<p>Concevoir des sites web modernes avec HTML et CSS</p> 
</div> 

<!-- Menu d'acces rapide --> 
<ul id="menuhaut"> 

<lixa href="i ndex.html" accesskey="l">Retour a 1 'accueil</a> - </li> 

<lixa href ="contact. html ">Contact</a> - </li> 

<lixa href="securise.html">Espace prive</ax/li> 
</ul> 



Comme en temoigne la figure 17-2, ce menu est encore assez rudimentaire, mais des 
styles CSS le mettront en forme. 



Figure 17-2 

Le menu rapide sans 
mise en forme 




Retour a I'accueil 
Contact - 
Espace prive 
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Le conteneur de liste (<ul>) portera des marges, un arriere-plan noir, et un texte 
blanc aligne sur la droite. En outre, les elements de liste n'arboreront pas de puce : 

#menuhaut { 

margin: 0; 

padding: O.lem 0.5em O.lem 0; 

list-style-type: none; 

background-color: black; 

color: white; 

text-align: right; 
} 

Ces memes elements de liste prendront place a la suite les uns des autres a la maniere 
d'elements en ligne : 

#menuhaut li { 

display: inline; 
} 

lis seront blancs et soulignes uniquement lors du survol par le pointeur de la souris : 

#menuhaut a { 

color: white; 

text-decoration: none; 
} 
#menuhaut a: hover { 

text-decoration: underline; 
} 

Le resultat ainsi obtenu satisfait nos exigences. 

Le menu vertical 

C'est un sommaire general decore par un arriere-plan graphique (figure 17-3). 

Opter pour des dimensions exprimees en em modifiera automatiquement la taille du 
menu a chaque changement de taille du texte (opere, dans certaines limites, par l'uti- 
lisateurvia les preferences de son navigateur). L'image d'arriere-plan debordera done 
de l'espace prevu par defaut (figure 17-4). 
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Figure 17-3 

Le menu general 



Figure 17-4 

L'image d'arriere-plan 



Enfin, des effets de couleurs et une infobulle descriptive accompagneront le survol 
des liens (figure 17-5). 



Figure 17-5 

Comportement lors du 
survol d'un lien 




Concevoir des 

detaille du liwe~ r dtion clu ' 
intertitre 

Lorem ipsum dolor si 
venenatis vitae, preti 
sit amet mauris, Null 
tellus blandit tristique 
torquent per conubia 
lectus. Suspendisse i 

Vivamus at augue. Fi 
Fusee imperdiet, sap 
euismod sem turpis i 
Phasellus egestas, qi 
natoque penatibus el 
Integer fringilla dolor 
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Le menu general regroupe les liens du sommaire et le formulaire de recherche. C'est 
done un conteneur neutre <ch'v> qui englobera ces deux objets. Focalisons-nous dans 
un premier temps sur le menu de navigation general : 

<div id="menu"> 

<!-- Menu de navigation general --> 

<ul> 

<lixa href="i ndex.html" access key="l">Accuei "I </ax/"li> 

<lixa href="somm. php" title="Voir le plan detaille du livre"> 

Sommai re</ax/li> 
<lixa href="extraits.php" title="Quelques parties de l'ouvrage"> 

Lire des extraits</ax/"li> 
<lixa href="presse. php" 

title="Medias et sites qui mentionnent ce livre"> 

Presse et retours</ax/li> 
<lixa href="errata. php" 

title="Erreurs et corrections apportees"> 

Errata</ax/li> 
<lixa href="exemples.php" title="Codes CSS d'exemple du livre"> 

Exempl es</ax/l i > 
<lixa href="bannieres. php" 

title="Soutenez et faites connaitre ce livre"> 

Soutien</ax/li> 
</ul> 

<!-- Formulaire de recherche --> 

</div> 

Ce premier jet est encore assez pauvre graphiquement ; enrichissons-le. Le conte- 
neur <div id="menu"> doit pouvoir s' adapter a la taille de police choisie, afficher un 
arriere-plan graphique, et se placer a gauche directement sous le menu horizontal : 

#menu { 

float: left; 

width: 15em; 

padding: 0.5em 8em 0; 

margin: Opx; 

background: #336600 url (fondmenu.jpg) bottom left no-repeat; 
} 

Le bloc de menu <ul> ne doit arborer ni puces ni marges internes (padding). On le 
dote en revanche de marges laterales d'epaisseur lem de chaque cote : 
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#menu ul { 

list-style-type: none; 

padding: 0; 

margin: lem; 
} 

La mise en forme par defaut des elements de liste <1 i > convient, mais leurs liens doi- 
vent etre dimensionnes pour apparaitre sous forme de boutons. On leur applique par 
consequent la propriete display: block avec hauteur frxee et hauteur de ligne cen- 
trant le texte verticalement. Une couleur de fond distinguera les liens survoles par le 
pointeur de la souris : 



#menu li a { 

display: block; 
text-decoration: none; 
height: 1.4em; 
line-height: 1.4em; /'•'•' 



pour centrer verticalement le texte 
dans le bouton de lien */ 



color: white; 

font-weight: bold; 

font-size: 120%; 

text-indent: lem; 
} 
#menu li a:hover { 

background: #cccc33; 

color: #336600; 
} 



Un bon formulaire de recherche assistera ce sommaire general. 



Le formulaire de recherche 

II est place dans le bloc menu, juste sous le menu general 



<!-- Formulaire de recherche --> 

<p>Recherche generale:</p> 

<form action="recherche.php" method="get"> 

<div> 

<input type="text" name="recherche" class="champ' 
value="mot-cle" /> 

<input type="submit" value=" ok " /> 
</div> 
</form> 



Mise en ceuvre dans un projet professionnel 

QUATRIEME PARTI E 



II comprend les elements en ligne <form>, son champ <input> de type texte, et un 
champ de validation de type submit. Un element <form> ne pouvant pas contenir 
directement d'autres elements en ligne, nous avons regroupe les balises <input> dans 
un bloc <ch'v>. La mise en forme se limite a la gestion des espaces par defaut sur <p> 
et <form> et a la definition d'un style de police pour le paragraphe : 

#menu p { 

margin: 1.5em lem; 

font-weight: bold; 

color: white; 

} 

#menu form { 

margin :0 lem; 

} 

Fixer la largeur du champ de texte evitera tout decalage et uniformisera l'affichage 
sur tous les navigateurs : 

#menu form .champ { 

width: 8em; 

} 

Ceci conclut la structuration et mise en page du formulaire. 



Aller plus loin Sites web dynamiques 

Nous passons discretement sous silence la programmation du moteur de recherche a proprement parler, 
invoque dans cet exemple par le script PHP recherche . php - elle sort du cadre de cet ouvrage. De 
nombreux sites web expliquent PHP et I'envoi de formulaires, par exemple Salemioche.net a I'adresse : 

► http://www.salemioche.net/script-php-1 .php 

B3 Chaleat et al, PHPIMySQL et JavaScript, Eyrolles 2005 



Tous ces elements de navigation mis en place, passons a l'integration du contenu 
dans la page. 



18 



Inserer le contenu 
du document 



Le site bien habille, ses menus mis en place et decores, tout le ceremonial est pret 
pour accueillir la raison d'etre de tout projet web digne de ce nom : le contenu. 



Structure generate du contenu 

Le bloc de contenu general presente differents elements distincts, dontla figure 18-1 
donne un apercu global de l'organisation : 

• un titre principal et un sous-titre ; 

• un encart affichant une liste d'evenements recents ; 

• le contenu a proprement parler. 



Conception de maquette « lorem ipsum » et les textes de remplissage 

Ne vous fiez pas a ce texte provisoire, le site ne sera pas developpe en latin ! Ce texte de remplissage, 
appele « lorem ipsum », est un contenu type souvent utilise lors de la creation de maquettes de sites 
web pour donner un apercu du rendu final de la page. 
Le site Lipsum propose ce poeme a I'adresse : http://lipsum.com/ 
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CONCEVOIR DES SITES WEB MODERNES AVEC HTML ET CSS I 

Presentation du livre 

intertitre 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros dolor, 
venenatis vitae, pretium ut, suscipit nee, lectus, Mauris urna. Etiam auctor lacus 
sit amet mauris. Nullam bibendum. Mauris vitae leo. Nullam arcu. In nee odio nee 
tellus blandit tristique. Mauris vel libero. Class aptent taciti sociosqu ad litora 
torquent per conubia nostra, per inceptos hymenaeos. Proin congue pharetra 
lectus, Suspendisse interdum eleifend nulla, Vestibulum lacinia mi nee ipsum, 




Recemment 



■/ 22 septembre 2004 : 
concours de manqeaqe de 
choucroute 

</ 6 aout 2004 : Une breve 

• 27 juillet 2004 : test 

V 23 juillet 2004 : Disparition de 
I'aqenda hier 



Vivamus at augue. Fusee neque ipsum, varius vel, laoreet id, tristique eget, ante. 

Fusee imperdiet, sapien in dapibus volutpat, sapien massa dictum eros, nee 

euismod sem turpis id dolor. Integer pulvinar pellentesque justo. Proin dui. 

Phasellus egestas, quam id placerat dignissim, ante neque congue nulla, vitae tempor tellus ante at risus. Cum sociis 

natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ac pede. Fusee facilisis wisi vitae dui. 

Integer fringilla dolor eu ipsum. Donee felis mi, nonummy sed, elementum non, commodo at, dui. 

Quisque laoreet cursus ligula. Morbi imperdiet metus sit amet arcu tristique iaculis. Maecenas leo quam, aliquam eget, 
sollicitudin a, pretium id, ipsum. Curabitur consectetuer. Fusee at massa. Nulla bibendum sagittis magna. Maecenas quis 
nibh quis ligula rutrum varius. Sed eleifend enim ac tortor commodo sodales. Vestibulum augue velit, pulvinar quis, 
accumsan at, scelerisque at, nunc. Ut consectetuer aliquet elit, Vivamus facilisis porta nisi, 



Figure 18-1 

Organisation du contenu general 



Le bloc de contenu global se place dans le code a la suite du bloc de menu : 

<div id="menu"> 

</div> 

<!-- Contenu general --> 
<div id="global"> 

</div> 

Le bloc de menu etant positionne en flottant, le contenu l'epouse en s'ecoulant tout 
autour. Pour eviter qua terme il occupe aussi l'espace situe sous le menu (large de 
15em), nous decalerons sa marge gauche de 15 . 5em vers la droite : 

#g"lobal { 

margin-left: 15.5em; 
} 
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Titres et sous-titres 

Les elements <hl>, <h2>, etc. representeront, comme c'est l'usage, les niveaux hierar- 
chiques du document. II est rapide de structurer le document cree en le dotant d'un 
titre et d'un sous-titre : 

<div id="global"> 

<hl>Concevoir des sites web modernes avec HTML et CSS</hl> 
<h2>Presentation du livre</h2> 

</div> 

Le createur imaginatif pourra ensuite appliquer a ces elements les styles recherches. 
En ce qui nous concerne, la figure 18-1 est le resultat des regies suivantes : 

#global hi { 

font-weight: bold; 
font-size: 150%; 
padding-bottom: 0.2em; 
border-bottom: 3px solid #ffff99; 
font-variant: small -caps; 
text-indent: 5px; 
color: #250; 

} 

#global h2 { 

margin-top: lem; 

margin-bottom: lem; 

font-size: 110%; 

font-weight: bold; 

color: #282; 
} 



Encart des evenements recents 

II n'a pu echapper a votre perspicacite que l'encart relatant les derniers evenements 
est un cadre graphique de largeur fixe et de hauteur variable. C'est une bonne occa- 
sion de reviser cette lecon : un tel encart implique l'imbrication de deux blocs <div>. 
II comprendra un titre de troisieme niveau (<h3>) et une liste d'evenements repre- 
sentee par les elements <ul> et <1 i>. 
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<!-- Contenu general --> 
<div id="global"> 

<hl>Concevoi r des sites web avec HTML et CSS</hl> 

<h2>Presentation du "Iivre</h2> 



<!-- Encart --> 
<div id="encart"> 
<h3>Recemment : </h3> 
<div id="bloccadre"> 
<ul> 

<li>Date 
<li>Date 
<li>Date 
<li>Date 
<li>Date 
</ul> 
</div> 
</div> 



<a href="lienl, 
<a href="lien2, 
<a href="lien3, 
<a href="lien4, 
<a href="lien5, 



html ">evenement l</ax/l i > 
html ">evenement 2</ax/l i > 
html ">evenement 3</ax/l i > 
html ">evenement 4</ax/l i > 
html ">evenement 5</ax/l i > 



A nouveau, il s'agit avant tout de regler en CSS les diverses marges internes et 
externes. Pour le reste, reportez-vous au chapitre 14, traitant des encadrements 
graphiques : 

/* Encart */ 
#encart { 

float: right; 

width: 2 50px; 

margin: 5px 5px 5px; 

padding-top: 30px; 

background: url (posthaut. png) left top no-repeat; 
} 
#encart h3 { 

font-size: 130%; 

margin: 40px; 
} 
#bloccadre { 

background: url (postbas .png) left bottom no-repeat; 

padding: 25px 40px; 
} 
#bloccadre ul { 

margin: lem 0; 

padding:0; 
} 
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#b"loccadre li { 

margin: 0; 

list-style-image: url (postpuce.png) ; 
} 
#bloccadre li a { 

color: black; 

text-decoration: none; 
} 
#bloccadre li a:hover { 

text-decoration: underline; 
} 

Ce cadre graphique utilise les images posthaut.png (figure 18-2), postbas.png 
(figure 18-3), et la puce postpuce. png (figure 18-4). 



Figure 18-2 

Partie haute de I'encart 




Figure 18-3 

Partie basse de I'encart 



hauteur reelle : 
900px 



Figure 18-4 

Puce pour les elements 
de I'encart 



^ 
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Contenu textuel 

Texte et illustrations internes suivent simplement l'encart dans le code HTML. Nul 
besoin de les englober dans un bloc quelconque ; ils se trouvent deja dans le <ch'v> 
d'identifiant global : 



<div id="encart"> 

</div> 
<p>Lorem ipsum dolor sit amet,etc.</p> 

</div> <!-- Fin du bloc « global » --> 

Ce contenu ne necessite aucune mise en forme particuliere : sa presence dans le bloc 
global le positionne et les declarations generales portant sur le corps du document 
(<body>), heritees, definissent sa police. 



Bilan sur les codes utilises 

Tout au long de ce projet, nous avons su separer totalement le contenu de la mise en 
forme dans le document. Le code XHTML rassemble structure et contenu ; 
habillage et design sont regroupes dans un fichier CSS externe. Void la synthese des 
deux parties de ce projet : 

Fichier index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Alsacreations , le livre</title> 

<meta http-equiv="Content-Type" 

content="text/html ; charset=iso-8859-15" /> 
<link rel="stylesheet" type="text/css" href="styles. ess" 

media="screen" /> 
</head> 

<body> 
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<!-- En-tete --> 
<div id="header"> 

<img src="livre.png" alt="livre ill ust rati f" /> 

<hl>Alsacreations , le livre</hl> 

<p>Concevoi r des sites web avec HTML et CSS</p> 
</div> 

<!-- Menu acces rapide --> 
<ul id="menuhaut"> 

<lixa href="index. html" accesskey="l">Retour a 1 'accuei"l</a> - </li> 

<lixa href="contact.htm"l ">Contact</a> - </li> 

<lixa href="securise. htm"l">Espace prive</ax/li> 
</ul> 
<div id="menu"> 

<!-- Menu de navigation general --> 

<ul> 

<lixa href="index. html" accesskey="l">Accueil</ax/li> 

<lixa href="somm.php3" title="Voir le plan detaille du livre"> 

Sommai re</ax/li> 
<lixa href="extraits. php3" title="Quelques parties de l'ouvrage"> 

Lire des extraits</ax/li> 
<lixa href="apresse.php3" 

title="Medias et sites qui mentionnent ce livre"> 

Presse et retours</ax/li> 
<lixa href="errata.php3" title="Erreurs et corrections apportees"> 

Errata</ax/li> 
<lixa href="exemples. php3" title="Codes CSS d'exemple du livre"> 

Exempl es</ax/l i > 
<lixa href="bannieres .php3" 

title="Soutenez et faites connaitre ce livre"> 

Soutien</ax/l i> 
</ul> 

<!-- Formulaire de recherche --> 

<p>Recherche generale:</p> 

<form action="recherche.php3" method="get"> 

<div> 

<input type="text" name="recherche" class="champ" 
value="mot-cle" /> 

<input type="submit" value=" ok " /> 
</div> 
</form> 
</div> 
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<!-- Contenu general --> 
<div id="global"> 

<hl>Concevoi r des sites web modernes avec HTML et CSS</hl> 

<h2>Presentation du livre</h2> 

<!-- Encart --> 
<div id="encart"> 
<h3>Recemment : </h3> 

<div id="bloccadre"> 

<ul> 



i>Date: <a href= 

i>Date: <a href= 

i>Date: <a href= 

i>Date: <a href= 

i>Date: <a href= 



'1 i enl . html ">evenement l</ax/l i> 

'lien2 . html">evenement 2</ax/li> 

'lien3 . html">evenement 3</ax/"li> 

'1 i en4 . html ">evenement 4</ax/l i> 

'lien5 . html">evenement 5</ax/"li> 



<li: 

<li: 

<li: 

<li: 

<"li: 

</ul> 

</div> 

</div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis 
eros dolor, venenatis vitae, pretium ut, suscipit nee, lectus. Mauris 
urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae 
leo. Nullam arcu. In nee odio nee tellus blandit tristique. Mauris vel 
libero. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra, per inceptos hymenaeos. Proin congue pharetra lectus. 
Suspendisse interdum el ei fend nulla. Vestibulum 1 acini a mi nee ipsum... 
</p> 
</div> 
</body> 
</html> 



Fichier styles.css 

/* Mise en page globale */ 

body { 

margin: 0; 

padding: 0; 

background: white; 

color: black; 

font-size: 80%; 

font-family: "Bitstream Vera Sans' 

} 



Verdana, Aria! , Helvetica, serif; 
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/* En-tete */ 

#header { 

height: lOOpx; 

background: #97C05F url (banniere.jpg) top left no-repeat; 

} 

#header img { 

float: right; 

margin: 5px 5px 0; 
} 
#header hi { 

text-indent: -5000px; 

margin :0; 

line-height: 0; 
} 
#header p { 

margin: 45px 200px; 

font-weight: bold; 

color: white; 

font-size: l.lem; 
} 

/* Menu horizontal */ 
#menuhaut { 

margin: 0; 

padding: O.lem 0.5em O.lem 0; 

list-style-type: none; 

background-color: black; 

color: white; 

text-align: right; 
} 
#menuhaut li { 

display: inline; 
} 
#menuhaut a { 

color: white; 

text-decoration: none; 
} 
#menuhaut a: hover { 

text-decoration: underline; 
} 
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/* Menu vertical */ 
#menu { 

float: left; 

width: 15em; 

padding: 0.5em 8em 0; 

margin: Opx; 

background: #336600 url (fondmenu.jpg) bottom left no-repeat; 
} 
#menu ul { 

list-style-type: none; 

padding: 0; 

margin: lem lem; 
} 
#menu li a { 

display: block; 

text-decoration: none; 

height: 1.4em; 

line-height: 1.4em; 

color: white; 

font-weight: bold; 

font-size: 120%; 

text-indent: lem; 
} 
#menu li a:hover { 

background: #cccc33; 

color: #336600; 
} 

/* Formulaire */ 

#menu p { 

margin: 1.5em lem; 

font-weight: bold; 

color: white; 

} 

#menu form { 

margin :0 lem; 

} 

#menu form .champ { 

width: 8em; 

} 
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/* Contenu global */ 

#global { 

margin-left: 15.5em; 

} 

#global hi { 

font-weight: bold; 

font-size: 150%; 

padding-bottom: 0.2em; 

border-bottom: 3px solid #ffff99; 

font-variant: small -caps; 

text-indent: 5px; 

color: #225500; 
} 
#global h2 { 

margin-top: lem; 

margin-bottom: lem; 

font-size: 110%; 

font-weight: bold; 

color: #228822; 
} 

/* Encart */ 
#encart { 

float: right; 

width: 2 50px; 

margin: 5px 5px 5px; 

padding-top: 30px; 

background: url (posthaut. png) left top no-repeat; 
} 
#encart h3 { 

font-size: 130%; 

margin: 40px; 
} 
#bloccadre { 

background: url (postbas.png) left bottom no-repeat; 

padding: 2 5px 40px; 
} 
#bloccadre ul { 

margin: lem 0; 

padding:0; 
} 
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#bloccadre li { 

margin: 0; 

list-style-image: url (postpuce. png) ; 
} 
#bloccadre li a { 

color: black; 

text-decoration: none; 
} 
#bloccadre li a:hover { 

text-decoration: underline; 
} 



A RETENIR Site web du livre 

Ces deux fichiers, presentes ici a titre indicatif, se trouvent sur le site web de presen- 
tation du livre : 

► http://www.alsacreations.com/livre/ 

► http://editions-eyrolles.com 
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Aller plus loin 
avec les CSS 



Ce projet mene a bien, explorons plus avant les styles CSS pour mieux apprecier les 
avantages qu'ils conferent. 



Inserer du contenu dynamiquement 

Une bonne utilisation des styles CSS separe entierement la presentation et le con- 
tenu. On peut des lors concevoir des sites web entierement dynamiques, au contenu 
genere via une base de donnees. Decrivons ces trois elements : 

• Un gabarit en HTML limite aux elements vides de contenus (balises de menu, de 
titres, de contenu general, etc.). 

• Une base de donnees stockant les contenus. On l'exploitera en formulant des 
requetes exprimees dans son langage d'interrogation (generalement SQL), a tra- 
vers un langage de generation de pages web comme PHP ou ASP. Cette techni- 
que extraira les donnees recherchees en les triant et ordonnant dans la page de 
gabarit. 

• Des feuilles de styles CSS habilleront l'ensemble et en assureront la presentation 
sur differents medias, comme un ecran ou une imprimante. 
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Des langages de programmation aussi complexes que PHP et SQL sortent evidem- 
ment du cadre de cet ouvrage ; on trouve plethore de livres sur ces sujets. 

L'idee de fonder un site dynamique sur une base de donnees est excellente dans un 
cadre professionnel. La compartimentation fonctionnelle stricte facilitera enorme- 
ment la tache du webmaster, notamment lors des mises a jour. 



Proposer des styles alternatifs 

Separer la structure de la mise en page permet d'intervenir de maniere tres souple sur 
la charte graphique, sans aucun impact sur le contenu. Aucun site web n'illustre ni 
n'exploite plus spectaculairement cette idee que CSS ZenGarden, modele du genre. 
On peut d'un clic y choisir un habillage CSS parmi plusieurs centaines. . . le texte res- 
tant inchange. 
► http://www.csszengarden.com/tr/francais 

Dans la pratique, les nombreux sites qui proposent plusieurs mises en page CSS le 
font pour des raisons publicitaires (changement de couleur du site, decor de Noel) ou 
a des fins d'accessibilite (fort contraste, grandes polices). Ces techniques de choix de 
styles alternatifs s'appellent styleswitcher. Toutes reposent sur un langage de pro- 
grammation tel que JavaScript ou PHP, capable de stocker les choix de l'utilisateur. 

Lexpose de ces techniques suppose la connaissance de ces langages. Les prerequis 
seraient trop longs a exposer ici, mais le Web regorge de tels didacticiels, que vous 
trouverez rapidement sur tout moteur de recherche. En void quelques-uns : 

Tableau 19-1 Quelques didacticiels sur les styles alternatifs 



Site URL 


Styleswitcher avec JavaScript 
(en anglais) 


http://www.alistapart.com/articles/alternate/ 


Styleswitcher avec PHP 
(en anglais) 


http://www.alistapart.com/articles/phpswitch/ 


Styleswitcher avec JavaScript 
(en francais) 


http://batraciens.net/css-astuces/skins-changement.htm 


Styleswitcher avec PHP 
(en francais) 


http://css.alsacreations.com/Tutoriels-PHP/style-switcher-php 
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Proposer une version imprimable 



Jusqu'ici, nous nous sommes focalises sur le rendu sur ecran d'ordinateur, mais les 
CSS sont tres riches, et capables de traiter de nombreux medias : screen (ecran), 
print (imprimante), aural (synthetiseur vocal), braille (appareils braille), 
handheld (assistants numeriques a petit ecran), projection (presentations projetees), 
tv (televiseurs), etc. Cette liste est consignee a l'adresse : 
► http://www.yoyodesign.org/doc/w3c/css2/media.html. 

II serait dommage de conclure ce livre sans avoir evoque le papier. Ce que produit 
une imprimante differe souvent de ce que Ton peut observer sur le moniteur : il 
manque parfois des parties entieres, alors que d'autres portions visibles a l'ecran sont 
reprises mais inutiles (publi cites, parties graphiques). 

II est pourtant tres simple de preparer specialement un document pour l'impression. 
Une feuille de styles specialisee, imprimante. ess, s'en acquittera. On l'integre en 
l'associant, dans la balise <1 i nk>, au media pri nt : 

<link rel="stylesheet" type="text/css" href="imprimante.css" 
media="print" /> 

Le document suivant prevoit son rendu sur ecran et sa sortie imprimante : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 
<head> 

<ti tl e>ti t re evocateu r</ti tl e> 
<meta http-equiv="Content-Type" 

content="text/html ; charset=iso-8859-l" /> 
<link rel="stylesheet" type="text/css" 

href="styles.css" media="screen" /> 
<link rel="stylesheet" type="text/css" 

href="imprimante.css" media="print" /> 
</head> 

<body> 

<hl>Titre principal de ma page</hl> 

<p class="noprint">Ce paragraphe ne doit pas etre imprime, mais il est 

visible a l'ecran</p> 

<div class="noprint">Comme le paragraphe precedent, ce bloc (et tout ce 

qu'il contient) ne doit apparaitre qu'a 1 'ecran</div> 

</body> 

</html> 
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On produit le rendu d'impression en appliquant une regie CSS de la feuille 
imprimante.css : 

Fichier imprimante.css 

.noprint { 
display: none; 
} 

Alors que tous les elements apparaitront a l'ecran (titre <hl>, paragraphe <p> et con- 
teneur <ch'v>), les elements de classe noprint ne laisseront aucune trace a l'impres- 
sion. Par consequent, la feuille de papier ne recevra que le titre de la page ! 

Nous vous laissons imaginer les possibilites : afficher une page en portrait ou en pay- 
sage, supprimer des marges, adapter une page a la taille du papier, gerer les sauts de 
pages, etc. 

Retenez cependant qua l'heure actuelle, peu de navigateurs exploitent totalement les 
proprietes CSS du media print. Opera est tres en avance sur ses camarades, mais 
pour contenter la majorite de vos visiteurs, il vous faudra vous restreindre aux pro- 
prietes les plus basiques. 



Internet Explorer 7 et les CSS 



La derniere version du navigateur de Microsoft a ete rendue publique a la fin de 
l'annee 2006 et commence peu a peu a remplacer IE6 (a condition que le systeme 
d'exploitation de l'utilisateur soit au moins egal a Windows XP). 

Disons-le tout net : IE7 a fait de bons progres en matiere de conformite aux stan- 
dards et d'implementation des CSS. De plus, il corrige un certain nombre de bogues 
de son predecesseur et facilite ainsi la vie aux concepteurs web. 

Meme si IE7 reste encore en retrait par rapport a des navigateurs plus reactifs que lui 
(Opera, Firefox et Safari notamment), la liste des fonctionnalites desormais propo- 
sees est plutot encourageante : 

• De nombreux bogues specifiques a IE6 et ses predecesseurs (« pikaboo », 
« guillotine », « 3-pixel-jog »...) ont ete corriges. 

• Le pseudo-element : hover s'applique a present a tous les elements et n'est plus 
limite aux seuls liens <a>. 

• Les proprietes min-width, max-width, min-height et max-height sont desormais 
prises en charge. 
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• La valeur fixed est a present reconnue pour la propriete position, ce qui ouvre 
de nouvelles perspectives de positionnements. 

• De nouveaux selecteurs et pseudo-classes sont reconnus : first-child (premier 
enfant), selecteur adjacent, selecteur d'attribut, selecteur d'enfant. 

• Le prologue XML ne fait plus passer IE en mode « quirks » (revoir le chapitre 7 
concernant le modele de boite Microsoft). 

• Les bordures de 1 px dotted ne sont plus rendues en tirets (revoir le chapitre 6 
concernant les bordures). 

• Le canal alpha (transparence) des fichiers PNG est reconnu. II ne s'agit pas veri- 
tablement d'une avancee en CSS, mais ce sera bien utile aux concepteurs web. 

Cette liste, longtemps attendue, est une aubaine pour les concepteurs web soucieux 
de la compatibilite des navigateurs et actuellement encore contraints de se restreindre 
a une version IE6 vieillissante. 

Signalons toutefois quelques lacunes importantes qui ne sont toujours pas resolues 
dans IE7 : 

• Plusieurs proprietes CSS2 ne sont pas implementees : border-spacing, opacity, 
content, text-shadow. 

• Differents selecteurs ou pseudo-elements CSS2 ne sont toujours pas reconnus : 
:after, :before, :lang, :focuset :active sur des elements autres que les liens <a>. 

• Les valeurs tab! e et tab! e-cel 1 ne sont toujours pas reconnues pour la propriete 
display. 



Conclusion 



Ce manuel ne constitue qu'une introduction au monde des styles CSS et a leur uni- 
vers, les standards du W3C. 

II accompagnera vos premiers pas dans la conception de sites web propres, compati- 
bles et accessibles. II vous aidera aussi a percevoir le Web comme le media qu'il 
devrait etre : un outil au service de tous, sans distinction de capacites, de culture ou 
d'outil de consultation. 

Nous avons longuement evoque ensemble l'habillage d'un document et le position- 
nement des elements de contenu. Bien des domaines restent a decouvrir ou a 
developper ; ainsi, l'accessibilite aux handicaps hen est encore qua ses debuts. 

Dans l'attente d'ouvrages plus specifiques, explorez attentivement les ressources don- 
nees en annexe. Elles vous accompagneront la ou nous vous laissons et vous feront 
decouvrir de nouveaux aspects des possibilites de CSS. 
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Nous avons souvent deplore les limitations des navigateurs, genant la bonne exploi- 
tation de bien des fonctionnalites CSS. Gageons que leurs versions successives corri- 
geront peu a peu toutes ces carences et que l'utopie d'une prise en charge complete et 
correcte de CSS approche rapidement. 

CSS souffre du mal des technologies trop en avance sur leur temps (en l'occurrence, 
sur les navigateurs) : alors que le W3C debat deja d'un brouillon tres prometteur 
d'une troisieme version de la norme, les navigateurs actuels peinent encore a prendre 
en charge CSS 2. 

N'oubliez pas que l'emploi des styles CSS n'est qu'une partie d'un tout : a quoi bon 
rechercher les avantages de CSS et de la separation entre contenu et mise en forme si 
c'est pour ignorer d'autres principes fondamentaux des bonnes pratiques : proprete 
du code, semantique et bon usage des balises, intuitivite de la navigation, conception 
aux normes. 

En somme, developper un site web respectant les normes et les bonnes pratiques ha 
rien d'obligatoire ; c'est seulement essentiel. 



Annexes 



Sites et 
ressources 



A 

Liste des proprietes CSS 



Void la liste des proprietes CSS telles que decrites dans les documents de la norme 
CSS 2 (http://www.w3.org/TR/1998/REC-CSS2-19980512/propidx.html). Ceci incorpore 
done notamment les proprietes deja presentes en CSS 1. 

Tableau A-1 Index des proprietes CSS 



Norn de la propriete 


Valeurs 


Explications 


azimuth 


angle, left-side, far-left, 


Determine la direction d'origine du son en 




left, center-left, center, 


media aural. Les navigateurs actuels ne 




center-right, right, far-right, 


gerant pas encore les restitutions vocales, on 




right-side, behind, leftwards, 


utilise pour cela des logiciels specialises. La 




rightwards, inherit 


plupart ne prennent pas encore en charge CSS. 


background 


Raccourci pour background-col or, 
background- image, 
background- repeat, 
background-attachment, 
background- position. 




background- 


scroll, fixed, i nherit 


Fige une image d'arriere-plan inseree avec 


attachment 




background-image. Celle-ci ne defile 
plus avec le contenu de I'element auquel elle 
est appliquee. 


background-color 


couleur, transparent, inherit 


Definit la couleur de fond d'un element. 
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Tableau A-1 Index des proprietes CSS (suite) 



Norn de la propriete Valeurs Explications 


background-i mage 


URL, none, inherit Affiche une image d'arriere-plan pour I'ele- 

ment (ou la page dans le cas de la balise 
body). Par defaut, I'image sera repetee en 
damier (ou papier peint) a partir du coin supe- 
rieur gauche de I'element. 


background- 
position 


pourcentage, longueur, top, center, Positionne une image d'arriere-plan definie 
bottom, left, right, inherit avec background-image. Propriete gene- 

ralement utilisee en I'absence de repetition 
(background- repeat). 


background- 
repeat 


repeat, repeat-x, repeat-y, 
no- repeat, inherit 


Limite et controle la repetition d'une image 
d'arriere-plan definie par background- 
image. 


border Raccourci pour border-width, 

border-style, border-color 




border-collapse 


collapse, separate, inherit 


Determine si dans un tableau les bordures des 
elements adjacents (cellule, groupe de cellu- 
les ou de colonnes) doivent etre affichees 
separement ou fusionnees. 


border-color 


couleur, transparent, inherit 


Definit la couleur de bordure d'un element. 
Elle ne sera appliquee qu'en accompagne- 
ment d'un type et d'une epaisseur de bordure 
(border-style, border-width). 


border-spacing 


longueur, inherit 


Determine I'espacement entre les cellules 
(sans bordures ni marges). 


border-style 


style, inherit 


Definit le type des bordures d'un element. II 
ne sera applique qu'en accompagnement 
d'une epaisseur de bordure (border- 
style). 


border-top, 
border-right, 
border-bottom, 
border-left 


Raccourci pour border-top-width, 
border -top-style, 
border-top-color, etc. 




border-width 


longueur, inherit 


Definit I'epaisseur des bordures d'un element. 
Elle ne sera appliquee qu'en accompagne- 
ment d'un style de bordure (border- 
style). 
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Tableau A-1 Index des proprietes CSS (suite) 


Norn de la propriete Valeurs Explications 


bottom 


longueur, pourcentage, auto, inherit Determine la distance entre le bas de I'ele- 

ment et le bas de son eventuel conteneur, a 
defaut la page. Ne s'applique qu'aux ele- 
ments positionnes. 


caption-side 


top, bottom, left, right, inherit 


Specifie la hauteur maximale d'un element de 
contenu (sans bordures ni marges), dans le 
media print. 


clear 


none, left, right, both, inherit 


Determine si un element peut se trouver sur la 
meme bande horizontale qu'un element flot- 
tant. 


clip 


forme, auto, inherit 


Definit la zone visible d'un element. Reprend 
par defaut les dimensions de I'element 
parent. 


content 


chame, URL, compteur, attr(x), 
open-quote, close-quote, 
inherit 


S'applique aux pseudo-elements : before et 
: after pour generer un contenu dans un 
document. 


counter- 
increment 


identifiant, entier, none, inherit 


Accepte un ou plusieurs identifiants de comp- 
teurs et les incremente d'une unite par defaut. 
On peut preciser un autre increment, y com- 
pris des entiers negatifs ou nuls. 


counter-reset 


identifiant, entier, none, inherit 


Accepte un ou plusieurs identifiants de comp- 
teurs et leur associe une valeur de reinitialisa- 
tion (par defaut 0). 


cue 


Raccourci pour cue-before, 
cue-after 




cue-after 


URL, none, inherit 


Definit un son a jouer apres lecture de I'ele- 
ment dans la sortie vocale sur des systemes 
audio (media aural). On precisera le chemin 
d'acces, absolu ou relatif, menant au fichier 
son. Les formats de son reconnus sont .wav, 
. au et . ai . Les navigateurs actuels ne 
gerant pas encore les restitutions vocales, on 
utilise pour cela des logiciels specialises. La 
plupart ne prennent pas encore en charge 
CSS. 
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Tableau A-1 Index des proprietes CSS (suite) 



Norn de la propriete Valeurs Explications 


cue-before 


URL, none, inherit 


Definit un son a jouer avant lecture de I'ele- 
ment dans la sortie vocale sur des systemes 
audio (media aural). On precisera le chemin 
d'acces, absolu ou relatif, menant au fichier 
son. Les formats de son reconnus sont .wav, 
. au et . ai . Les navigateurs actuels ne gerant 
pas encore les restitutions vocales, on utilise 
pour cela des logiciels specialises. La plupart ne 
prennent pas encore en charge CSS. 


cursor 


URL, auto, crosshai r, default, 
pointer, move, e- resize, 
ne-resize, nw-resize, n-resize, 
se-resize, sw-resize, s-resize, 
w- resize, text, wait, help, 
inherit 


Specifie le type de pointeur de souris qui rem- 
placera la fleche, pointeur par defaut. 


direction 


ltr, rtl, inherit 


Definit la direction d'ecriture, de gauche a 
droite (ltr, left to right) ou de droite a gau- 
che (rtl , right to left). Utile pour des langues 
comme I'arabe ou I'hebreu. 


display 


inline, block, list-item, 
run-in, compact, marker, table, 
inline -table, table- row-group, 
table- header -group, 
table- footer -group, table- row, 
table- column -group, 
table- column, table- cell, 
table- caption, none, inherit 


Controle I'affichage des elements dans la 
page. 


elevation 


angle, below, level, above, higher, 
lower, inherit 


Precise la direction d'origine du son (haut ou 
bas) dans la sortie vocale sur des systemes 
audio (media aural) capables de son stereo- 
phonique ou surround. Les navigateurs 
actuels ne gerant pas encore les restitutions 
vocales, on utilise pour cela des logiciels spe- 
cialises. La plupart ne prennent pas encore en 
charge CSS. 


empty-cells 


show, hide, inherit Controle le rendu de I'arriere-plan des cellules 

vides et de leurs bordures. Concerne les cellu- 
les sans contenu visible ou masquees (hide). 
Un contenu invisible ne comporte que des 
caracteres ASCII « blancs » : retour chariot 
(Od), nouvelle ligne (Oa), tabulation (09), 
espace (20). 
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Tableau A-1 Index des propriet.es CSS (suite) 



Nom de la propriete Valeurs Explications 


float 


left, right, none, inherit 


Specifie de quel cote du conteneur I'element 
doit s'aligner. 


font 


Raccourci pour font-styl e, 
font-variant, font-weight, 
font-size, line-height, 
font-family 




font-family 


nom, generique, inherit 


Definit la famille de polices a utiliser pour les 
textes. Se presente sous forme d'une liste de 
noms classes par ordre de preference et sepa- 
res par des virgules. 


font-size 


taille, pourcentage 


Definit la taille de police d'un element. On 
distingue les tallies absolues et les tallies rela- 
tives, calculees en fonction de la taille de 
I'element parent. 


font-size -ad just 


nombre, none, inherit 


Un entire important de lisibilite des polices de 
caracteres dans les petites tailles, e'est le rap- 
port du ex (hauteur du « x ») sur la taille de 
la fonte. Cette propriete adapte la taille des 
polices de caracteres de remplacement pour 
que le ex effectif soit le meme que si la fonte 
demandee avait ete disponible. 


font-stretch 


normal, wider, narrower, 
ultra-condensed, 
extra-condensed, condensed, 
semi -condensed, semi -expanded, 
expanded, extra-expanded, 
ultra-expanded, inherit 


Selectionne le dessin normal, comprime ou 
elargi dans une famille de polices. 


font-style 


normal, italic, oblique, 
inherit 


Definit I'orientation de la police d'un element. 
Si les families de polices definies par font- 
f ami 1 y comportent un style italique ou obli- 
que, ils seront utilises. Le cas echeant, le navi- 
gateur forcera I'inclinaison du caractere. 


font-variant 


normal, small-caps, inherit 


Affiche la police d'un element en petites 
majuscules. 


font-weight normal, bold, bolder, lighter, Definit la graisse de police d'un element. 

nombre, inherit 

I i 
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Tableau A-1 Index des proprietes CSS (suite) 


Norn de la propriete Valeurs Explications 


height 


longueur, pourcentage, auto Specifie la hauteur d'un element de contenu. 

S'applique aussi aux elements redimensionna- 
bles tels que <img>, <input>, <textarea> 
ou <object> (mais ne peut s'appliquer a des 
elements non redimensionnables). Les valeurs 
doivent toujours etre positives. 


left 


longueur, pourcentage, auto 


Determine la distance entre la gauche de 
I'element et la gauche de son eventuel conte- 
neur, a defaut la page. Ne s'applique qu'aux 
elements positionnes. 


letter-spacing 


normal, longueur, inherit 


Definit I'espace entre les caracteres d'un 
texte. Dans le cas d'un texte justifie, la valeur 
normal autorise le navigateur a modifier 
I'interlettrage. 


line-height 


normal, nombre, longueur, pourcentage, 
inherit 


Definit I'interlignage dans un bloc de texte. La 
valeur normal correspond a I'interlignage de 
base calcule par le navigateur en fonction de 
la taille de police utilisee. Les valeurs donnees 
peuvent etre negatives. 


list-style 


Raccourci pour 1 i st-styl e-type, 
1 i st-styl e-i mage, 
1 i st-styl e-posi ti on 




list-style-image 


URL, none, inherit 


Definit I'image de la puce, ce qui permet de 
personnaliser les listes. L'URL de I'image peut 
comporter un chemin relatif ou absolu. 


list-style- 
position 


inside, outside, inherit 


Determine le retrait de la puce, c'est-a-dire son 
incrustation par rapport au bloc <ul> ou <ol>. 


list-style-type 


disc, ci rcle, square, decimal, 
deci mal -1 eadi ng-zero, 
lower-roman, upper-roman, 
lower-greek, lower-alpha, 
lower- latin, upper-latin, 
upper-al pha, hebrew, armeni an, 
georgian, cjk-ideographic, 
hi ragana, katakan, 
hi ragana-i roha, katagana- 
i roha, none, inherit 


Definit le style (ou apparence) de la puce. 
S'applique uniquement en I'absence de 
list-style-image ou si cette propriete 
a la valeur none. 


margin Raccourci pour margin -top, 

margin-right, margin-bottom, 
margin-left 
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Tableau A-1 Index des propriet.es CSS (suite) 


Norn de la propriete Valeurs Explications 


margin-top, 
margin -right, 
margin-bottom, 
margin -left 


largeur, inherit 


Definit les marges externes d'un element. 


marker-offset 


longueur, auto, inherit 


Specifie la distance entre les bordures les plus 
proches d'une boite de marqueur et la boite 
principale qui lui est associee. 


marks 


crop, cross, none, inherit 


Hirondelles (reperes imprimes sur la page 
pour en faciliter la coupe) pour le media 
print. 


max-height 


longueur, pourcentage, none, inherit 


Specifie la hauteur maximale d'un element de 
contenu (sans bordures ni marges). S'applique 
aussi aux elements redimensionnables tels 
que <img>, <input>, <textarea> ou 
<object> (mais ne peut s'appliquer a des 
elements non redimensionnables). Les valeurs 
doivent toujours etre positives. 


max -width 


longueur, pourcentage, none, inherit 


Specifie la largeur maximale d'un element de 
contenu (sauf tableau et sans bordures ni 
marges). S'applique aussi aux elements redi- 
mensionnables tels que <img>, <input>, 
<textarea> ou <object> (mais ne peut 
s'appliquer a des elements non redimension- 
nables). Les valeurs doivent toujours etre 
positives. 


mi n -height 


longueur, pourcentage, i nheri t 


Specifie la hauteur minimale d'un element de 
contenu (sans bordures ni marges). S'applique 
aussi aux elements redimensionnables tels 
que <img>, <input>, <textarea> ou 
<object> (mais ne peut s'appliquer a des 
elements non redimensionnables). Les valeurs 
doivent toujours etre positives. 


mi n -width 


longueur, pourcentage, i nheri t 


Specifie la largeur minimale d'un element de 
contenu (sauf tableau et sans bordures ni 
marges). S'applique aussi aux elements redi- 
mensionnables tels que <img>, <input>, 
<textarea> ou <object> (mais ne peut 
s'appliquer a des elements non redimension- 
nables). Les valeurs doivent toujours etre 
positives. 
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Tableau A-1 Index des proprietes CSS (suite) 



Norn de la propriete Valeurs Explications 


orphans 


entier, inherit 


Evite les orphelines (lignes isolees sur leur 
page car elles ne tenaient pas sur la page pre- 
cedente) en definissant un nombre minimum 
de lignes par page imprimee. Ceci concerne le 
media print. 


outline 


Raccourci pour outline-col or, 
outl i ne-styl e, outl i ne-wi dth 




outline-color 


couleur, invert, inherit Definit la couleur de contour d'un element, 

qui ne s'applique qu'en presence d'un type de 
contour (outl i ne-styl e) ou d'une epais- 
seur de contour (outline-width). Con- 
trairement aux bordures, les contours peuvent 
adopter une forme non rectangulaire et 
n'occupent pas d'espace. 


outline-style 


style, inherit Definit le style de contour d'un element, qui 

ne s'applique qu'en presence d'une epaisseur 
de contour (outline-width). Contraire- 
ment aux bordures, les contours peuvent 
adopter une forme non rectangulaire et 
n'occupent pas d'espace. Les contours concer- 
ned toujours les quatre cotes de leur ele- 
ment. Aucun navigateur ne les reconnait 
I encore. 


outline-width 


epaisseur, inherit 


Definit I'epaisseur du contour d'un element, 
qui ne s'applique qu'en presence d'un style de 
contour (outline-style). Contrairement 
aux bordures, les contours peuvent adopter 
une forme non rectangulaire et n'occupent 
pas d'espace. Dans le style double, I'epais- 
seur de contour correspond a celle des deux 
traits et de I'espace qui les separe. Les con- 
tours concernent toujours les quatre cotes de 
leur element. Aucun navigateur ne les recon- 
naTt encore. 


overflow 


visible, hidden, scroll, auto, 
inherit 


Specifie si le contenu d'un element de type 
bloc doit etre rogne quand il depasse de I'ele- 
ment parent. 


padding 


Raccourci pour paddi ng-top, 

paddi ng-ri ght, paddi ng- bottom, 

padding-left 
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Tableau A-1 Index des proprietes CSS (suite) 



Norn de la propriete Valeurs Explications 


padding-top, 
padding-right, 
padding-bottom, 
padding-left 


espacement, i nherit 


Definit les marges internes d'un element. 


page 


identifiant, auto 


Definit une mise en page en vue d'une even- 
tuelle impression (media pri nt). 


page-break-after 


auto, always, avoid, left, right, 
inherit 


Impose un saut de page apres I'element 
(media print). 


page-break- 
before 


auto, always, avoid, left, right, 
inherit 


Impose un saut de page avant I'element. Ceci 
concerne le media print. 


page-break- 
inside 


avoid, auto, inherit 


Indique a quels endroits de I'element un saut 
de page peut se produire (media pri nt). 


pause 


duree, pourcentage, inherit 


Definit un temps de pause avant et apres lec- 
ture de I'element dans la sortie vocale sur des 
systemes audio (media aural). Les naviga- 
teurs actuels ne gerant pas encore les restitu- 
tions vocales, on utilise pour cela des logiciels 
specialises. La plupart ne prennent pas encore 
en charge CSS. 


pause-after 


duree, pourcentage, inherit 


Definit un temps de pause apres lecture de 
I'element dans la sortie vocale sur des syste- 
mes audio (media aural). Les navigateurs 
actuels ne gerant pas encore les restitutions 
vocales, on utilise pour cela des logiciels spe- 
cialises. La plupart ne prennent pas encore en 
charge CSS. 


pause-before 


duree, pourcentage, inherit Definit un temps de pause avant lecture de 

I'element dans la sortie vocale sur des syste- 
mes audio (media aural). Les navigateurs 
actuels ne gerant pas encore les restitutions 
vocales, on utilise pour cela des logiciels spe- 
cialises. La plupart ne prennent pas encore en 
charge CSS. 


pitch 


frequence, x-low, low, medium, high, Definit le timbre de la voix de lecture dans la 
x-high, inherit sortie vocale sur des systemes audio (media 

aural). La propriete voice -family defi- 
nit le type de voix, dont depend le timbre : 
une voix d'homme a une frequence de base 
de 1 20 Hz ; une femme parle a 21 Hz. 
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Tableau A-1 Index des proprietes CSS (suite) 



Norn de la propriete Valeurs Explications 


pitch (suite) 




Les navigateurs actuels ne gerant pas encore 
les restitutions vocales, on utilise pour cela 
des logiciels specialises. La plupart ne pren- 
nent pas encore en charge CSS. 


pitch-range 


nombre, inherit 


Definit la gamme de frequences de la voix de 
lecture dans la sortie vocale sur des systemes 
audio (media aural). Les navigateurs 
actuels ne gerant pas encore les restitutions 
vocales, on utilise pour cela des logiciels spe- 
cialises. La plupart ne prennent pas encore en 
charge CSS. 


play-during 


URL, mix, repeat, auto, none, 
inherit 


Semblable aux proprietes cue-before et 
cue-after, cette propriete specifie le son a 
jouer en arriere-plan lors de la lecture (media 
aural). Les navigateurs actuels ne gerant 
pas encore les restitutions vocales, on utilise 
pour cela des logiciels specialises. La plupart 
ne prennent pas encore en charge CSS. 


position 


static, relative, absolute, 
fixed, inherit 


Determine I'emplacement de I'element. La 
valeur absol ute permet un positionnement 
fin avec top, 1 eft, ri ght et bottom. 


quotes 


chame, none, inherit 


Specifie des guillemets, quel que soit le nom- 
bre de citations imbriquees. 


richness 


nombre, inherit 


Definit la portee de la voix de lecture dans la 
sortie vocale sur des systemes audio (media 
aural). Une valeur elevee produit une voix 
de stentor ; une valeur faible met en place 
une voix douce. Les navigateurs actuels ne 
gerant pas encore les restitutions vocales, on 
utilise pour cela des logiciels specialises. La 
plupart ne prennent pas encore en charge 
CSS. 


right 


longueur, pourcentage, auto, inherit 


Determine la distance entre la droite de I'ele- 
ment et la droite de son eventuel conteneur, a 
defaut la page. Ne s'applique qu'aux ele- 
ments positionnes. 


size 


longueur, auto, portrait, Definit la taille et I'orientation (portrait ou pay- 
1 andscape, i nheri t sage) de la page imprimee. La taille comprend 

dans I'ordre la largeur et la hauteur, separees 
par un blanc. Ceci concerne le media pri nt. 
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Norn de la propriete Valeurs Explications 


speak 


normal, none, spel 1 -out, 
inherit 


Definit la prononciation dans la sortie vocale 
sur des systemes audio (media aural). Les 
navigateurs actuels ne gerant pas encore les 
restitutions vocales, on utilise pour cela des 
logiciels specialises. La plupart ne prennent 
pas encore en charge CSS. 


speak-header 


once, always, inherit 


Dans la sortie vocale sur des systemes audio 
(media aural), indique quand enoncer les 
cellules d'en-tete (avant chaque cellule ou 
uniquement avant les cellules dont la cellule 
d'en-tete differe de celle de la cellule prece- 
dente). Les navigateurs actuels ne gerant pas 
encore les restitutions vocales, on utilise pour 
cela des logiciels specialises. La plupart ne 
prennent pas encore en charge CSS. 


speak-numeral 


digits, continuous, inherit 


Dans la sortie vocale sur des systemes audio 
(media aural), indique comment lire les 
nombres (ex : « 1 2 »), chiffre a chiffre (« un- 
deux ») ou globalement (« douze »). Les navi- 
gateurs actuels ne gerant pas encore les resti- 
tutions vocales, on utilise pour cela des 
logiciels specialises. La plupart ne prennent 
pas encore en charge CSS. 


speak- 
punctuation 


code, none, i nherit 


Dans la sortie vocale sur des systemes audio 
(media aural), precise la maniere de traiter 
les signes de ponctuation (ex : « , »). lis peu- 
vent etre lus explicitement (« virgule ») ou 
interpreted sous forme de pause et d'intona- 
tions. Les navigateurs actuels ne gerant pas 
encore les restitutions vocales, on utilise pour 
cela des logiciels specialises. La plupart ne 
prennent pas encore en charge CSS. 


speech-rate 


nombre, x-sl ow, si ow, medi urn, 
fast, x-fast, faster, slower, 
inherit 


Definit la vitesse de lecture dans la sortie 
vocale sur des systemes audio (media 
aural). Les navigateurs actuels ne gerant 
pas encore les restitutions vocales, on utilise 
pour cela des logiciels specialises. La plupart 
ne prennent pas encore en charge CSS. 
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Norn de la propriete Valeurs Explications 


stress 


nombre, inherit 


Definit I'emphase, I'ampleur et I'inflexion de la 
voix dans la sortie vocale sur des systemes 
audio (media aural). Les navigateurs actuels 
ne gerant pas encore les restitutions vocales, 
on utilise pour cela des logiciels specialises. La 
plupart ne prennent pas encore en charge CSS. 


table-layout 


auto, fixed, inherit 


Definit I'algorithme employe par le navigateur 
pour la disposition des cellules, des rangees et 
des colonnes du tableau. 


text-align 


left, right, center, justify, 
chaine, inherit 


Permet d'aligner le contenu d'un element de 
type bloc. 


text-decoration 


none, underl i ne, overl i ne, 
line-through, blink, inherit 


Modifie I'apparence d'un texte. On pourra 
preciser plusieurs decorations en les separant 
par des blancs. 


text-indent 


longueur, pourcentage, i nherit Definit I'alinea de la premiere ligne d'un texte. 

Si la valeur donnee est negative, le debut du 
texte pourra sortir de la marge, voire de la 
zone de visualisation. 


text-shadow 


couleur, longueur, none Definit des effets d'ombrage a appliquer au 

texte d'un element. Les differentes valeurs, 
separees par des blancs, seront appliquees 
dans I'ordre et pourront se recouvrir. Les 
effets d'ombrage ne recouvrent pas le texte ni 
ne modifient la taille de la boite, mais peu- 
vent s'etendre au-dela de ses limites. 


text-transform 


capitalize, uppercase, Definit les effets de capitalisation d'un texte, 
lowercase, none, inherit independamment de celle du document 

source. La valeur none ne change rien et 
reprend celle du fichier HTML. 


top 


longueur, pourcentage, auto, inherit Determine la distance entre le haut de I'ele- 

ment et le haut de son eventuel conteneur, a 
defaut la page. Ne s'applique qu'aux ele- 
ments positionnes. 


unicode-bidi 


normal, embed, bidi -override, 
inherit 


Definit la direction d'ecriture d'un texte. 


vertical -align baseline, sub, super, top, Agit sur le positionnement vertical des 

text-top, mi ddl e, bottom, enfants d'un element en ligne, ou de type bloc 

text-bottom, pourcentage, generant des boites en ligne anonymes. 

lonqueur, inherit 
| y | 
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Norn de la propriete Valeurs Explications 


visibility 


visible, hidden, collapse, Masque ou affiche ['element. La valeur 
inherit hidden reserve un espace vide de la taille 

qu'aurait I'element s'il etait represente. 


voice-family 


voix specifique, voix generique, i nheri t 


Definit le type de voix dans la sortie vocale sur 
des systemes audio (media aural). C'est 
une notion comparable a celle de police pour 
un texte. On pourra opter pour des termes 
generiques (male, female, child signi- 
fiant respectivement « homme », « femme », 
« enfant ») ou des termes specifiques propres 
a chaque logiciel de retranscription sonore : 
comedians (comediens), droid (voix 
robotisee), etc. Les navigateurs actuels ne 
gerant pas encore les restitutions vocales, on 
utilise pour cela des logiciels specialises. La 
plupart ne prennent pas encore en charge 
CSS. 


volume 


nombre, pourcentage, silent, x-soft, 
soft, medi urn, 1 oud, x-1 oud, 
inherit 


Definit le volume sonore sur la machine 
cliente dans la sortie vocale sur des systemes 
audio (media aural). L'utilisateur parametre 
les valeurs minimales et maximales sur son 
ordinateur. Les navigateurs actuels ne gerant 
pas encore les restitutions vocales, on utilise 
pour cela des logiciels specialises. La plupart 
ne prennent pas encore en charge CSS. 


white-space 


normal, pre, nowrap, inherit 


Gere I'affichage des blancs et la cesure dans 
un element. 


widows 


entier, inherit 


Evite les veuves en precisant un nombre de 
lignes avant le saut de page. Ceci concerne le 
media print. 


width 


longueur, pourcentage, auto, inherit 


Determine la largeur d'un element. 


word-spacing 


normal, longueur, inherit 


Definit I'espace entre les mots d'un texte. 
Dans le cas d'un texte justifie, la valeur 
normal autorise le navigateur a modifier 
I'espacement entre les mots. 


z-index 


auto, entier, inherit 


Permet la superposition des elements en defi- 
nissant leur ordre d'empilement. Cette pro- 
priete ne s'applique qu'aux elements 
positionnes. 



B 



Exemples de gabarits 



Nous donnons ici quelques modeles classiques de mise en page a plusieurs colonnes, 
etirables ou de largeur fixe. Vous trouverez un large panel de gabarits sur le site 
Alsacreations a l'adresse http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS 
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Gabarit a deux colonnes et de largeur fixe 



Partie HTML 

<body> 

<hl>en-tete de page</hl> 
<div id="global"> 
<div id="blocmenu"> 

<p>Bloc menu</p> 

<p>largeur fixe: 150px</p> 

<ul id="menu"> 

<1 i ><a h ref ="#">1 i en 1</ ax/1 i > 

<1 i ><a h ref ="#">1 i en 2</ ax/1 i > 

<1 i ><a h ref ="#">1 i en 3</ax/l i > 

<1 i ><a h ref ="#">1 i en4</ax/l i > 

<1 i xa h ref ="#">1 i en 5</ax/l i > 

</ul> 
</div> 
<div id="contenu"> 

<p>Bloc contenu</p> 

<p>largeur fixe: 600px</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aliquam cursus rhoncus magna. Vivamus rhoncus, tellus eget viverra 
consectetuer, arcu libero hendrerit lacus, eget elementum wisi sapien 
eget lectus. Fusee eget wisi. Quisque aliquet viverra quam. Aliquam 
ante. Pellentesque venenatis purus sed dui . Sed augue. Suspendisse vel 
sapien. Donee quam enim, venenatis vitae, dictum et, viverra dapibus, 
dolor. Proin luctus mollis tellus. Suspendisse potenti . Mauris 
scelerisque tristique ante.</p> 

<p>Quisque quam. Proin sit amet mi ut dui pellentesque aliquam. 
Praesent wisi risus, pharetra in, pellentesque ut, tempus non , eros. 
Duis iaculis eros at risus consectetuer posuere. Etiam sed ante quis 
ipsum rutrum rutrum. Donee vestibulum dui at quam. Suspendisse 
tristique. Duis nonummy sollicitudin lectus. Mauris odio magna, blandit 
at, ultrices a, elementum eget, turpis. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Donee sed tellus 
sed felis consectetuer imperdiet. Vivamus mi urna, tristique quis, 
fringilla pharetra, ornare sit amet, dui. Quisque wisi tortor, iaculis 
sed, ornare ac, tempus quis, magna. </p> 
</div> 

<p id="pied">Pied de page</p> 
</div> 

</body> 
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Partie CSS 

body { 

margin :0; 

padch'ng:0; 

} 

P { 

margin :0 lem 0; 

} 

hi { 

height: 50px; 

width: 750px; 

background-color: #4c4e00; 

color: white; 

margin :0; 

} 

#global { /* c'est ici que nous specif ions 

la largeur generale du document */ 
width: 750px; 
background-col or : #666600 ; 
} 

#blocmenu { 
float: left; 
width: 150px; 
background-col or: #666600; 
color: white; 
} 

#blocmenu p { 
margin -left: lem; 
} 

#blocmenu ul { 
margin :0 lem 0; 
} 

#blocmenu li { 
list-style-type: none; 
margin :0 lem; 
} 

#blocmenu li a { 
color: white; 
text-decoration: none; 
} 

#blocmenu li a: hover { 
text-decoration: underline; 
} 
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#contenu { 

margin-left: 150px; 

background-color: #eaeae9; 

} 

#contenu p { 

margin: lem; 

} 

#pied { 

clear: both; 

width: 750px; 

background-color: #cccc00; 

margin :0; 

} 



entete de page 



largeurrixe: IDUp: 



Bloc contenu 
largeurfcie: 600px 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Aliquam cursus rhoncus magna. 
Vivamus rhoncus, tellus eget viverra consectetuer, arcu libero hendrerit lacus, eget elernentum 
wisi sapien egetlectus. Fusee eget wisi. Quisque aliquet viverra quam. Aliquam ante. 
Pellentesque venenatis purus sed dm. Sed augue. Suspendisse vel sapien. Donee quam enim, 
venenatis vitae, dictum et, viverra dapibus, dolor. Proinluctus mollis tellus. Suspendisse potenti. 
Mauris scelensque tristique ante. 

Quisque quam. Proin sit amet mi ut dui pellentesque aliquam. Praesent wisi nsus, pharetra in, 
pellentesque ut, tempus non, eros. Duis iaculis eros at nsus consectetuer posuere. Etiam sed ante 
quis ipsum rutrum rutrum. Donee vestibulum dui at quam. Suspendisse tristique. Duis nonummy 
sollicitudinlectus. Mauris odio magna, blandit at, ultnees a, elernentum eget, turpis. Cum sociis 
natoque penatibus et magnis dis partunent montes, nascetur ndiculus mus. Donee sed tellus sed 
felis consectetuer imperdiet. Vivamus mi urna, tristique quis, fringilla pharetra, omare sit amet, 
dui. Quisque wisi tortor, iaculis sed, ornare ac, tempus quis, magna. 



[ de page 



Figure B-1 

Mise en page a deux colonnes en largeur fixe 



Exemples de gabarits 

Annexe B 



Gabarit a deux colonnes et de largeur adaptable 

Nous allons reprendre la structure HTML de l'exemple precedent. La seule diffe- 
rence portera sur le bloc #global qui, cette fois, ne sera pas limite en largeur et epou- 
sera done toute la largeur qui lui est devolue sur l'ecran. 

Partie HTML 
I Identique a ce"Ne de l'exemple precedent. 



Partie CSS 

body { 

margin :0; 

padding:0; 

} 

P { 

margin :0 lem 0; 

} 

hi { 

height: 50px; 

background-color: #4c4e00; 

color: white; 

margin :0; 

} 

#global { /* pas de largeur definie done la page 

va occuper toute la largeur */ 
background-col or : #666600 ; 

} 

#blocmenu { 

float: left; 

width: 150px; 

background-col or: #666600; 

color: white; 

} 

#blocmenu p { 

margin-left: lem; 

} 

#blocmenu ul { 

margin :0 lem 0; 

} 

#blocmenu li { 

list-style-type: none; 

margin :0 lem; 

} 
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#b"locmenu li a { 

color: white; 

text-decoration: none; 

} 

#blocmenu li a: hover { 

text-decoration: underline; 

} 

#contenu { 

margin-left: 150px; 

background-color: #eaeae9; 

} 

#contenu p { 

margin: lem; 

} 

#pied { 

clear: both; 

background-color: #cccc00; 

margin :0; 

} 



entete de page, largeur fluide 



argeur fixe: 150px 



Pied de page 



Bloc contenu 
largeur restante 

Lorem lpsum dolor sit amet, consectetuer adipiscing elit. Aliquam cursus rhoncus magna. Vivarnus rhoncus, 
tellus eget viverra consectetuer, arcu Hbero hendrent lacus, eget elementum wisi sapien eget lectus. Fusee ege 
wisi. Quisque aliquet viverra quam. Aliquam ante. Pellentesque venenatis purus sed dui. Sed augue. 
Suspendisse vel sapien. Donee quam enim, venenatis vitae, dictum et, viverra dapibus, dolor. Proinluctus 
mollis tellus. Suspendisse potenti. Mauris scelensque tnstique ante. 

Quisque quam. Proin sit amet mi ut dui pellentesque aliquam. Praesent wisi nsus, pharetra in, pellentesque ut, 
tempus non, eros. Duis laculis eros at risus consectetuer posuere. Etiam sed ante quis lpsum rutrum rutrum. 
Donee vestibulum dui at quam. Suspendisse tnstique. Duis nonummy sollicitudin lectus. Mauris odio magna, 
blandit at, ultnces a, elementum eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ndiculus mus. Donee sed tellus sed felis consectetuer imperdiet. Vivarnus mi uma, tnstique quis, 
fringilla pharetra, omare sit amet, dui. Quisque wisi tortor, iaculis sed, ornare ac, tempus quis, magna. 



Figure B-2 

Mise en page a deux colonnes en largeur fluide 
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Gabarit a trois colonnes et de largeur fixe 



Partie HTML 

<body> 

<hl>en-tete de page</hl> 

<div id="global"> 

<div id="blocmenugauche"> 

<p>Bloc menu</p> 

<p>largeur fixe: 150px</p> 

<ul id="menu"> 

<lixa href ="#">1 ienl</ax/li> 

<lixa href ="#">1 ien2</ax/li> 

<lixa href="#">lien3</ax/li> 

<"lixa href="#">lien4</ax/li> 

<lixa href="#">lien5</ax/li> 

</ul> 
</div> 

<div id="blocmenudroite"> 

<p>Bloc menu</p> 

<p>largeur fixe: 150px</p> 

<ul id="menu"> 

<lixa href="#">lienl</ax/li> 

<lixa href="#">lien2</ax/li> 

<lixa href="#">"lien3</ax/"li> 

<lixa href="#">lien4</ax/li> 

<lixa href="#">lien5</ax/li> 

</ul> 
</div> 
<div id="contenu"> 

<p>Bloc contenu</p> 

<p>largeur restante</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aliquam cursus rhoncus magna. Vivamus rhoncus, tellus eget viverra 
consectetuer, arcu "libero hendrerit lacus, eget elementum wisi sapien 
eget lectus. Fusee eget wisi. Quisque aliquet viverra quam. Aliquam 
ante. Pellentesque venenatis purus sed dui . Sed augue. Suspendisse vel 
sapien. Donee quam enim, venenatis vitae, dictum et, viverra dapibus, 
dolor. Proin luctus mollis tellus. Suspendisse potenti . Mauris 
scelerisque tristique ante.</p> 
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<p>Quisque quam. Proin sit amet mi ut dui pellentesque aliquam. 
Praesent wisi risus, pharetra in, pellentesque ut, tempus non , eros. 
Duis iaculis eros at risus consectetuer posuere. Etiam sed ante quis 
ipsum rutrum rutrum. Donee vestibulum dui at quam. Suspendisse 
tristique. Duis nonummy sollicitudin lectus. Mauris odio magna, blandit 
at, ultrices a, elementum eget, turpis. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Donee sed tellus 
sed felis consectetuer imperdiet. Vivamus mi urna, tristique quis, 
fringilla pharetra, ornare sit amet, dui. Quisque wisi tortor, iaculis 
sed, ornare ac, tempus quis, magna. </p> 

</div> 

<p id="pied">Pied de page</p> 
</div> 

</body> 



Partie CSS 

body { 

margin :0; 

padding:0; 

} 

P { 

margin :0 lem 0; 

} 

hi { 

height: 50px; 

width: 750px; 

background-color: #4c4e00; 

color: white; 

margin :0; 

} 

#global { 

width: 750px; 

background-col or: #666600; 

} 

#blocmenugauche { 

float: left; 

width: 150px; 

background-col or: #666600; 

color: white; 

} 
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#b"locmenudroite { 

float: right; 

width: 150px; 

background-col or: #666666; 

color: white; 

} 

#blocmenugauche p, #blocmenudroite p { 

margin-left: lem; 

} 

#blocmenugauche ul , #blocmenudroite ul { 

margin :0 lem 0; 

} 

#blocmenugauche li, #blocmenudroite li { 

list-style-type: none; 

margin :0 lem; 

} 

#blocmenugauche li a, #blocmenudroite li a { 

color: white; 

text-decoration: none; 

} 

#blocmenugauche li a:hover, #blocmenudroite li a:hover { 

text-decoration: underline; 

} 

#contenu { 

margin-left: 150px; 

margin-right: 150px; 

background-color: #eaeae9; 

} 

#contenu p { 

margin: lem; 

} 

#pied { 

clear: both; 

width: 750px; 

background-color: #cccc00; 

margin :0; 

} 
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entete de page 



Bloc menu 



Pied de page 



Bloc contenu 
largeur restante 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam cursusl 
rhoncus magna. Vivamus rhoncus, tellus eget viverra consectetuer, arcu 
libero hendrerit lacus, eget elementum wisi sapien eget lectus. Fusee 
eget wisi. Quisque aliquet viverra quarn. Aliquam ante. Pellentesque 
venenatis purus sed dui. Sed augue. Suspendisse vel sapien. Donee 
quam enim, venenatis vitae, dictum et, viverra dapibus, dolor. Proin 
luctus mollis tellus. Suspendisse potenti. Mauris scelerisque tristique 
ante. 

Quisque quarn. Proin sit amet mi ut dui pellentesque aliquam. Praesent 
wisi nsus, pharetra in, pellentesque ut, tempus non, eros. Duis laculis 
eros at nsus consectetuer posuere. Etiam sed ante quis ipsum rutrurn 
rutrurn. Donee vestibulum dui at quam. Suspendisse tristique. Duis 
nonummy sollicitudin lectus. Mauris odio magna, blandit at, ultnees a, 
elementum eget, turpis. Gum sociis natoque penatibus et magris dis 
parturient montes, nascetur ridiculus mus. Donee sed tellus sed felis 
consectetuer imperdiet. Vivamus mi urna, tristique quis, fringilla 
pharetra, ornare sit amet, dui. Quisque wisitortor, laculis sed, ornare ac,| 
tempus quis, magna. 



Figure B-3 

Mise en page a trois colonnes en largeur fixe 



c 



Ressources sur le Web 



Void quelques references et sites communautaires dignes d'interet. 



Sites en francais 



► Le forum d'Alsacreations (http://forum.alsacreations.com). Communaute discutant 
des standards : CSS, HTML et XHTML, XML et les nouveaux langages, etc. 

► Openweb (http://openweb.eu.org). Reference en francais dans le domaine des 
standards. Openweb est un collectif d'experts proposant de nombreuses ressour- 
ces et divers didacticiels portant sur XHTML, CSS, ECMAScript, etc. 

► Opquast (http://www.opquast.com). Projet recent et ambitieux de referentiel qua- 
lite pour les sites web, prenant en compte l'ergonomie, les fonctionnalites et 
l'accessibilite. 

► La liste des proprietes CSS vue par Media-Box (http://wiki.media-box.net/docu- 
mentation/css). Recueil de toutes les proprietes CSS 1 et CSS 2 : leur utilisation, 
leur application et leur prise en charge par les navigateurs. 

► Le forum Dreamweaver de Media-Box (http://dream.media-box.net) porte mal son 
nom. En effet, son salon CSS est tres bien frequente ; de nombreux membres 
experimented vous y attendent. 
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Figure C-1 

Le forum 
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Figure C-2 

Openweb.eu.org 
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► Forum GeckoZone (http://www.geckozone.org/forum/). Communaute dediee aux 
logiciels libres construits autour de Gecko, moteur de rendu de Mozilla (Firefox, 
Thunderbird, Camino, NVXJ). 
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Opquast.com 
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> Webmaster Hub (http://www.webmaster-hub.com). Forum tres generaliste ou certains 
salons, comme celui des CSS ou de l'accessibilite, s'avereront d'une grande utilite. 

► Salemioche.net (http://forum.salemioche.net), Freegaia.com (http://www.free- 
gaia.com/forums/), World Informatique (http://forums.world-informatique.com), 
Forum du Zero (http://www.siteduzero.com/forums), WebRanklnfo (http:// 
www.webrankinfo.com/forums). Communautes dont les salons HTML et CSS 
sont tres conviviaux. 



Sites en anglais 



HTML Dog (http://www.htmldog.com). Site tres fourni, proposant des cours et 
didacticiels sur HTML et CSS. 

W3C (http://www.w3c.org/). C'est l'organisme qui propose toutes les recom- 
mandations portant sur les normes de langage, d'accessibilite et d'internationali- 
sation sur le Web. Le terme « recommandation » releve d'une fausse modestie : il 
s'agit bel et bien de standards. 

Le validateur (X)HTML du W3C (http://validator.w3.org). 

Le validateur CSS du W3C (http://jigsaw.w3.org/css-validator/). 
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► WebDesignGroup (http://htmlhelp.com). Communaute d'entraide pour les deve- 
loppeurs HTML et CSS. 

► PositionlsEverything (http://positioniseverything.net/). Un site qui regroupe et cor- 
rige tous les bogues du navigateur Internet Explorer. 



Blogs, carnets et magazines web 

► Pompage (http://pompage.net). Magazine en ligne, un condense de traductions en 
francais d'articles internationaux. On y retrouve les points de vue des experts 
mondiaux qui comptent. 



Figure C-4 

Pompage.net 
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► Blog and Blues (http://www.blog-and-blues.org). Carnet personnel de Laurent 
Denis, membre d'Openweb et grand expert en matiere de specifications du W3C. 

► Standblog (http://standblog.org). Blog de Tristan Nitot, president de Mozilla 
Europe, portant sur les standards du Web, le projet Mozilla, le navigateur Firefox 
et le client de courrier electronique Thunderbird. 

► Tainted Words (http://tw.apinc.org). Journal de Steve Frecinaux, portant sur les 
standards et les logiciels libres. 
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► Dive the Web (http://www.communication.org/dive/). Chantal Ide (W3C Quebec) 
nous livre ses pensees sur les normes du Web. 
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► Fred Cavazza (http://www.fredcavazza.net). Fred est passionne d'ergonomie, de 
webmarketing et d'experiences utilisateur. Un blog tees riche et passionnant. 

► Jy[B]log (http://ljouanneau.com/blog/). Blog de Laurent Jouanneau, membre 
d'Openweb et precurseur de la technologie XUL. 

► Daniel Glazman (http://www.glazman.org/weblog/). L'auteur est le createur et 
developpeur du logiciel libre NVXJ, editeur HTML WYSIWYG aussi simple que 
conforme aux standards. 

► Dew's blog (http://dew.alsacreations.com/). Blog d'un developpeur talentueux et 
tourmente, aux billets souvent tees differents des habituels recits de la blogos- 
phere. 



Galerie de sites en CSS 

Void quelques sites web qui rassemblent les sites realises en CSS et qui sont de 
bonnes sources d'inspiration pour les concepteurs web. 
► http://www.kalitee.org (site francophone) 
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► http://www.csszengarden.com/tr/francais/ 

► http://cssvault.com 

► http://unmatchedstyle.com 
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► http://www.stylegala.com 

► http://www.webstandardsawards.com 

► http://www.cssbeauty.com 
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► http 

► http 

► http 

► http 

► http 

► http 



//www. w3csites.com 
//www. cssdrive.com 
://www. webcreme.com 
//www. ess-website. com 
//cssmania.com 



//www.menthe-fresh.fr (nouveau site francophone qui pousse le concept 



jusqu'a proposer des analyses completes des sites web indiques). 
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Les sites professionnels 

conformes 



Cette liste de sites web professionnels respectant les normes s'allongeant tous les 
jours, elle n'est pas exhaustive. On ne traite que de « conformite CSS », avec mises en 
page sans tableaux. Tous ces sites ne sont pas valides dans leur structure (HTML ou 
XHTML) ni accessibles aux handicaps. 



Sites en francais 



► Alsacreations (http://www.alsacreations.com). Site de l'auteur, communaute de 
partage de connaissances dans le domaine de la conception web. Les didacticiels 
CSS se trouvent a l'adresse http://css.alsacreations.com. 

► Alsacreations (http://www.alsacreations.fr). Lagence web alsacienne creee par 
l'auteur de cet ouvrage. 

► Liberation (http://www.liberation.fr). Le celebre quotidien national. 

► AFUL (http://www.aful.org). Association francophone des utilisateurs de Linux et 
des logiciels libres. 
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► AOL (http://www.aol.fr). Fournisseur d'acces Internet. 

► BNF (http://www.bnf.fr). Bibliotheque Nationale de France (accessible). 

► AFP (http://www.afp.com). Agence France Presse (HTML 4.0 transitionnel). 



Les sites professionnels conformes 

Annexe D 



Figure D-3 

liberation.fr 




AfTUAIIIF CuLTURf IN T F RAH" IIF UUtllUFOIA uHHIONJ TRAH&YFR5AI FI VOM HlOiilFKi IFRYIlTFi FfY&fFJOuT 




Damai, I'axe du moindre mal pour 
Bush 

ArfJ-fell foliriqjL'ir.L'ii", li; MulL-IUtir jnidrifjifi mil uuun* 
iuiiibQit iyi e u 3t«1i pDUMartlr duplBp lr-ikl#n. 

QjOltiltH ; Ml HI 1-1 mil iMil Ml* 



Cuatre alplnistes port-ej tjiiparuj 
au Nepal 

IH jbM o?-!-; t rtfctfuHfrn du PiLdar nl-ertDbre at 
tfeftt ['■..; donn* ;i; it ot .it Input! Una Snf«rmHl«h 
revala* nardi pirfarrftissada fninaaLa i KatrMndbu. 
LiBEPJTIOH.FP : mardi 1 1 nu ipiLlP JUffl 

Naplei vk ti m* dfc li guerre d« 
cIhii 

uapufc ur> in. La metrapola naridloriila tpnnalt ijna 
racrudarcenc a d* la criirlrvattijd-. It Cairo r i r,t 



GM0TIDIFN:m«ril1-: 



> ■l.BI tH Mil (harpa. HwU ( 

> L Xhiei I* du Mid tE ih< Wf 



CandMH I 1 

bmlxli 



n p« dai i*i m m la-i ■ 



Diijj'tit-hub 



Lh qutslion du jour 
L'ecolo^ie s'est e 
installed dans la i 
pre sid* ntie I le I 1 

A nnstoi d* Lqcirvqua da Yfcpn, t pua « 
partr-ritir $ Eyrae ra defeLvnnt ales pi 



K55 J . t ::«r.tb;i du n tifa 
PuHfcti 



SOLUTIONS POUR 
UNM:;NDEMOBILI 



► Renault (http://www.renault.com). Le constructeur automobile. 

► Eyrolles (http://www.eyrolles.com). Editions etlibrairie (XHTML 1.0 Strict). 

► Lycos (http://www.lycos.fr). Lycos France. 

► Macromedia (http://www.macromedia.fr). Editeur de Flash, Dreamweaver, 
Fireworks, etc. 

► Cetelem (http://www.cetelem.fr). Credits bancaires. 

► Premier Ministre (http://www.premier-ministre.gouv.fr/fr/). Site du premier ministre 
francais (XHTML 1.0 transitionnel). 

► Yahoo ! (http://fr.yahoo.com/). Yahoo ! France. 

► Skyblog (http://www.skyblog.com). La plate-forme de blog de la radio Skyrock. 



Sites en anglais 



► Amnesty International (http://www.amnestyusa.org). Amnesty International USA 
(XHTML 1.0 transitionnel). 

► Chevrolet (http://www.chevrolet.com). Site de la marque automobile (XHTML 
1.0 strict). 
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Figure D-5 

chevrolet.com 




► MSN (http://www.msn.com) ; MSN Search (http://search.msn.com). Microsoft 
Network et son moteur de recherche. 



MP3 (http://www.mp3.com). Format audio de reference. 
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Figure D-6 

msn.com 
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► One True Fit (http://www.onetruefit.com). La marque de vetements Lee 
(XHTML 1.0 strict). 

► Mercedes-Benz (http://www.mbusa.com). Site de la marque automobile. 



Reference Liste de sites 

Vous trouverez une liste plus complete et mise a jour a I'adresse suivante : 
► http://forum.alsacreations.com/ad-14-27-Sites-web-professionnels-conformes.html 



E 
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F 

Compatibility 
des navigateurs 



Cette annexe presente une synthese de la prise en charge des standards du Web par 
les navigateurs les plus repandus : Internet Explorer, Firefox (Netscape Navigator et 
Mozilla), et Opera. Les tableaux qui suivent portent sur les standards HTML, CSS, 
et DOM. 



Cette annexe est adaptee du document « Web Browser Standards Support » de David 
Hammond, repris ici avec son autorisation. 

► http://nanobox.chipx86.com/browser_support.php 



Interpretation des tableaux 

Chaque ligne traite d'une fonctionnalite de la technologie etudiee. Les cases rappor- 
tent le degre de prise en charge de cette fonctionnalite par le navigateur considere : 

• « O » denote une compatibilite complete ; 

• « N » trahit une carence ou une impasse ; 

• « P » represente une reconnaissance partielle ; 

• « ? » marque les interrogations en suspens. 

Un niveau de gris donne un apercu rapide de la situation. 
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Apports de la version web 



Dans la version web originale de ce document, la plupart des noms de fonctionnalites 
sont des liens vers les definitions officielles des standards qui leur correspondent. 
D'autre part, certaines evaluations de compatibilite, et notamment les reconnais- 
sances partielles « P », sont justifiees dans l'attribut title de la cellule de tableau cor- 
respondante. En general, on peut les faire apparaitre en placant le pointeur de la 
souris sur la case. 

Enfin, la version originale en ligne contient des tableaux detailles qui ne sont pas 
repris dans cette annexe. lis sont accessibles, pour les technologies HTML et DOM 
respectivement, aux adresses suivantes : 

► http://nanobox.chipx86.com/browser_support_html.php 

► http://nanobox.chipx86.com/browser_support_dom.php 



Navigateurs etudies 



Cette etude porte sur trois navigateurs web : 

• MSIE 6, Microsoft Internet Explorer pour Windows dans sa version 6. Signa- 
lons que Microsoft Internet Explorer pour Mac utilise un moteur de rendu qui n'a 
rien a voir avec celui de la version Windows. 

• Firefox 1.0 rassemble Firefox 1.0, Netscape Navigator 8 et les versions 1.7 de 
Mozilla - tous utilisent en effet le meme moteur de rendu. Les fonctionnalites 
propres a l'interface et non au moteur de rendu furent testees sur Firefox. 

• Opera 8. 



Version detaillee 

Nous ne reprenons ici que les tableaux sous forme abregee. Certains ont une version 
complete bien plus volumineuse et font apparaitre des valeurs de pourcentages (esti- 
mant la proportion de compatibilite). Une prise en charge incomplete d'une fonc- 
tionnalite compte pour 50 %. Les fonctionnalites aux degres de prise en charge 
inconnus n'entrent pas dans le calcul. Dans ce cas, le pourcentage est suivi du nombre 
de valeurs connues sur le nombre total de valeurs a evaluer (par exemple : 13/17), ce 
qui donne une idee de la fiabilite de la mesure. Le point d'interrogation « ? » apparait 
dans les cellules ou aucune mesure n'a pu etre menee. Dans la version web originale 
du document, les noms de ces fonctionnalites sont des liens menant vers les sections 
correspondantes dans les tableaux complets. 
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Notation des fonctionnalites 

Si le navigateur ne reconnait pas une fonction ou admet ne pas encore la prendre en 
charge alors qu'il le devrait, il recoit un « N » automatique. Les evaluations « O » 
correspondent aux fonctionnalites qui semblent bien prises en charge, sans bogue 
important. Les autres cas de figure produisent souvent un « P », generalement 
accompagne d'une justification (voir ci-dessus). Pour des raisons de coherence, c'est 
aussi un « P » qui sanctionnera une fonctionnalite qui n'est jamais correctement rea- 
lisee dans les cas ou le navigateur semble la reconnaitre et tenter de l'interpreter. 

D'autre part, nous ne notons « O » que toute fonctionnalite prise en charge de 
maniere native ou par un plug-in realise par les auteurs du navigateur. Si le bon fonc- 
tionnement depend d'un plug-in dont l'auteur n'est pas officiellement relie au projet, 
la note sera au mieux « P », meme si ce plug-in est fourni par defaut. Si la fonction- 
nalite impose le recours a un plug-in alors que l'equipe de developpement du naviga- 
teur n'en recommande aucun, elle sera notee « N ». Ces conventions nous permettent 
de nous concentrer sur revaluation des programmes a proprement parler. En effet, 
tous les navigateurs principaux proposent une collection de plug-ins realises par des 
tiers et ameliorant les capacites standards du produit ; incorporer ces derniers dans 
l'etude etait done inadequat et l'aurait faussee. 



HTML 



C'est le langage de base d'une page web. II en relie le texte, les images, les scripts, et 
tout autre contenu. La plupart des navigateurs donnent acces au code HTML dans 
le menu « Visualisation », entree « Source de la page » ou « Source ». (Ce tableau est 
ici donne dans sa forme resumee). 



Specification HTML 


MSIE6 






HTML 4.01 


a 


85% 


88% 


94% 


abbr 


0% 


100% 


75% 


acronym 


100% 


100% 


75% 


address 


100% 


100% 


100% 


area 


81% 


100% 


88% 


b 


100% 


100% 


100% 


base 


100% 


100% 


100% 


bdo 


100% 


100% 


100% 


big 


100% 


100% 


100% 


blockquote 


100% 


100% 


100% 
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Specification HTML 


MSIE6 


Firefoxl.O 


Opera 8 


body 


100% 


100% 


100% 


br 


100% 


100% 


100% 


button 


83% 


100% 


96% 


caption 


100% 


100% 


100% 


cite 


100% 


100% 


100% 


code 


100% 


100% 


100% 


col 


67% 


58% 


50% 


colgroup 


67% 


58% 


50% 


dd 


100% 


100% 


100% 


del 


100% 


100% 


100% 


dfn 


100% 


100% 


100% 


div 


100% 


100% 


100% 


dl 


100% 


100% 


100% 


dt 


100% 


100% 


100% 


em 


100% 


100% 


100% 


fieldset 


100% 


100% 


100% 


form 


100% - 11/12 


100% - 11/12 


100% - 11/12 


frame 


90% 


80% 


85% 


frameset 


100% 


83% 


83% 


hi 


100% 


100% 


100% 


h2 


100% 


100% 


100% 


h3 


100% 


100% 


100% 


h4 


100% 


100% 


100% 


h5 


100% 


100% 


100% 


h6 


100% 


100% 


100% 


head 


67% 


67% 


67% 


html 


100% 


100% 


100% 


i 


100% 


100% 


100% 


iframe 


92% 


92% 


96% 


img 


92% 


100% 


92% 


input 


89% 


91% 


78% 


ins 


100% 


100% 


100% 


kbd 


100% 


100% 


100% 


label 


75% 


75% 


100% 


legend 


100% 


80% 


80% 


li 


100% 


100% 


100% 



Compatibility des navigateurs 

Annexe F 



Specification HTML 


MSIE6 


Firefox 1.0 


Opera 8 


link 


73% 


73% 


73% 


map 


100% 


100% 


90% 


meta 


100% 


100% 


100% 


noframes 


0% 


100% 


88% 


noscript 


63% 


75% 


50% 


object 


46% - 13/17 


73% - 13/17 


69% - 13/17 


ol 


100% 


100% 


100% 


optgroup 


42% 


92% 


58% 


option 


44% 


75% 


56% 


P 


100% 


100% 


100% 


pa ram 


? 


? 


7 


pre 


100% 


100% 


100% 


q 


90% 


100% 


100% 


samp 


100% 


100% 


100% 


script 


100% 


80% 


80% 


select 


88% 


96% 


83% 


small 


100% 


100% 


100% 


span 


100% 


100% 


100% 


strong 


100% 


100% 


100% 


style 


80% 


80% 


80% 


sub 


100% 


100% 


100% 


sup 


100% 


100% 


100% 


table 


91% 


91% 


95% 


tbody 


90% 


90% 


90% 


td 


86% 


95% 


91% 


textarea 


97% 


100% 


93% 


tfoot 


90% 


90% 


90% 


th 


86% 


95% 


91% 


thead 


90% 


90% 


90% 


title 


50% 


50% 


50% 


tr 


90% 


90% 


90% 


tt 


100% 


100% 


100% 


ul 


100% 


100% 


100% 


var 


100% 


100% 


100% 


Attributs du noyau 


100% 


100% 


100% 


Evenements 


100% 


100% 


100% 
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MSIE6 


Firefoxl.O 


Opera 8 


Internationalisation (i18n) 


100% 


100% 


100% 


Alignement des cellules 


25% 


38% 


38% 


Revision XHTML 1.0 


HTML en XML 


0% 


100% 


100% 


Documents bien formes 


100% 


100% 


100% 


Types multimedia 


33% 


100% 


100% 


Fragments identifies par id 


100% 


50% 


100% 


Revision XHTML 1.1 


rb 


50% 


50% 


25% 


rbc 


0% 


50% 


25% 


rp 


25% 


50% 


25% 


rt 


100% 


33% 


17% 


rtc 


0% 


50% 


25% 


ruby 


100% 


50% 


25% 



Legende 



am 






0% 1 % - 25% 26% -50% 


51% -75% 


76% - 89% 



CSS 



C'est le langage permettant d'incorporer des elements de presentation a une page 
web : couleurs, polices de caracteres, images de fond, et mise en page. 

Les proprietes vocales - comportant les unites Angle, Frequency (frequence), et 
Time (duree) - sont des extensions facultatives a fins d'accessibilite. 

Remarque : nous travaillons pour detailler davantage ce tableau. 



Specification CSS 2.1 


MSIE6 


Firefoxl.O 


Opera 8 


Unites 


Angle 


N 


N 


N 


Color 











Counter 


N 


N 





Frequency 


N 


N 


(inherit) 


P 








Length 











Number 











Percentage 


P 





p 
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Specification CSS 2.1 


MSIE6 


Firefox 1.0 


Opera 8 


String 


N 


P 





Time 


N 


N 


URI 











Importance 


! important 


P 








Regles-at a 


©import 


P 








©media 











©page 


N 







Selecteurs 


* 


P 








E 











EF 











E>F 










E + F 


N 








[attr] 


N 








[attr="valeur"] 


N 








[attr~="valeur"] 


N 








[attr|="valeur"] 










.class 











#id 











Pseudo-classes 


:active 


p 





p 


:first-child 


N 








:focus 


N 








:hover 


P 





p 


:lang(c) 


N 








:link 











:visited 











Pseudo-elements 


:after 


N 








:before 


N 








:first-letter 











:first-line 











Proprietes de base 


background 


P 
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Specification CSS 2.1 




MSIE6 


Firefoxl.O 


Opera 8 


background-attachment 


P 








background-color 











background-image 











background-position 











background-repeat 











border 


P 








border-bottom 


P 








border-bottom-color 











border-bottom-style 


P 








border-bottom-width 











border-collapse 


P 


p 





border-color 











border-left 


P 








border-left-color 











border-left-style 


P 








border-left-width 











border-right 


P 








border-right-color 











border-right-style 


P 








border-right-width 











border-spacing 




N 








border-style 


P 








border-top 


P 








border-top-color 











border-top-style 


P 








border-top-width 











border-width 











bottom 


P 








caption-side 










clear 











clip 




N 








color 











content 




N 
N 


p 





counter-increment 




N 





counter-reset 




N 


N 





cursor 








p 
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Specification CSS 2.1 MSIE6 Firefoxl.O Opera 8 


direction 











display 


P 


P 


p 


display: block 











display: inline 











display: inline-block 


P 


N 


display: inline-table 






display: list-item 











display: none 











display: run-in 







display: table 


N 








display: table-caption 


N 








display: table-cell 


N 








display: table-column 


N 





N 


display: table-column-group 


N 





N 


display: table-footer-group 


N 








display: table-header-group 


N 





display: table-row 


N 








display: table-row-group 


N 








empty-cells 


N 


P 


p 


float 


P 








font 











font-family 











font-size 











font-style 











font-variant 











font-weight 











height 


P 








left 


P 








letter-spacing 











line-height 











list-style 


P 





p 


list-style-image 











list-style-position 











list-style-type 


P 








margin 


P 








margin-bottom 


P 
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Specification CSS 2.1 


MSIE6 


Firefoxl.O 


Opera 8 


margin-left 


P 








margin-right 


P 








margin-top 


P 








max-height 


P 








max-width 


N 








min-height 


P 








min-width 


N 








outline 


N 


N 





outline-color 


N 


N 





outline-style 


N 


N 





outline-width 


N 







overflow 











padding 


P 








padding-bottom 


P 








padding-left 


P 








padding-right 


P 








padding-top 


P 








position 


P 








position: absolute 











position: fixed 










position: relative 











position: static 











quotes 










right 


p 








table-layout 











text-align 











text-decoration 


p 








text-indent 











text-transform 











top 


p 








unicode-bidi 











vertical-align 











visibility 


p 


p 


p 


visibility: collapse 


N 


p 


p 


visibility: hidden 











visibility: visible 
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Specification CSS 2.1 


MSIE6 


Firefox 1.0 


Opera 8 


white-space 


P 





P 


width 


P 








word-spacing 


P 








z-index 


P 





P 


Impression 


orphans 




N 





page-break-after 


P 








page-break-before 


P 








page-break-inside 


P 


N 





widows 


N N 





Proprietes vocales 


azimuth 


N 


N 


N 


cue 


N 


N 
N 
N 
N 
N 


P 


cue-after 


N 


P 


cue-before 


N 


P 

N 


elevation 


N 


pause 


N 


P 


pause-after 


N 


N 
N 
N 
N 
N 
N 
N 
N 
N 
N 
N 
N 


P 


pause-before 


N 


P 


pitch 


N 


N 
N 
N 
N 


pitch-range 


N 


play-during 


N 


richness 


N 


speak 


N 


Z. Z. Z. Z. Z. -a 


speak-header 


N 


speak-numeral 


N 


speak-punctuation 


N 


speech-rate 


N 


stress 


N 


voice-family 


N 


N 


: 


volume 







a. Voir http://www.yoyodesign.Org/doc/w3c/css2/syndata.html#at-rules (version francaise de CSS 2). 



Legende 



Prise en charge de cette specification 



Non 



Partiel 



Oui 
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DOM 



C'est un modele permettant aux langages de scripts de gerer les donnees en entree et 
en sortie des navigateurs et de manipuler les informations des pages web. II est essen- 
tiel a toute application web evoluee. (Ce tableau est ici donne dans sa forme resumee). 



Specification DOM 


MSIE6 


Firefoxl.O 


Opera 8 


DOM Level 3 Core 


Interface DOMStringList 


0% 


0% 


100% 


Interface NameList 


0% 


0% 


0% 


Interface DOMImplementationList 


0% 


0% 


0% 


Interface DOMImplementationSource 


0% 


0% 


0% 


Interface DOMImplementation 


40% 


80% 


70% 


Interface DocumentFragment 


100% 


100% 


100% 


Interface Document 


36% 


76% - 23/28 


52% - 26/28 


Interface Node 


53% 


90% - 31/35 


69% - 34/35 


Interface NodeList 


100% 


100% 


100% 


Interface NamedNodeMap 


61% 


100% - 6/9 


100% 


Interface CharacterData 


100% 


100% 


100% 


Interface Attr 


43% 


64% 


64% 


Interface Element 


33% 


71% - 17/21 


74% - 17/21 


Interface Text 


40% 


40% 


40% 


Interface Comment 


100% 


100% 


100% 


Interface Typelnfo 


0% 


0% 


0% 


Interface UserDataHandler 


0% 
0% 


0% 


0% 


Interface DOMError 


0% 
0% 


0% 
0% 


Interface DOMErrorHandler 


0% 


Interface DOMLocator 


0% 
0% 


0% 
0% 


0% 


Interface DOMConfiguration 


70% 


Interface CDATASection 


0% 


100% 


100% 


Interface DocumentType 


0% 


86% 


86% 


Interface Notation 


0% 


0% 


0% 


Interface Entity 


0% 


0% 


0% 


Interface EntityReference 


0% 


0% 


0% 


Interface Processinglnstruction 


0% 


0% 


0% 


DOM Level 2 Events 


Interface EventTarget 


0% 


88% 


100% 


Interface EventListener 


50% 


50% 


50% 



Compatibility des navigateurs 

Annexe F 



Specification DOM 


MSIE6 


Firefox 1.0 


Opera 8 


Interface Event 


18% 


100% 


100% 


Interface DocumentEvent 


0% 


100% 


100% 


Interface Ul Event 


0o/„ 


88% 


88% 


Interface MouseEvent 


81% 


100% 


100% 


Interface MutationEvent 


0% 


100% 


100% 


HTML event types 


83% 


96% 


92% 


DOM Level 2 HTML 


Interface HTMLCollection 


100% 


100% 


100% 


Interface HTMLOptionsCollection 


75% 


100% 


50% 


Interface HTMLDocument 


85% 


100% 


97% 


Interface HTMLEIement 


100% 


100% 


100% 


Interface HTMLHtmlElement 


100% 


100% 


100% 


Interface HTMLHeadElement 


75% 


100% 


100% 


Interface HTMLLinkElement 


95% 


95% 


100% 


Interface HTMLTitleElement 


100% 


100% 


100% 


Interface HTMLMetaElement 


100% 


100% 


100% 


Interface HTMLBaseElement 


83% 


100% 


100% 


Interface HTMLIslndexElement 


0% 


100% 


100% 


Interface HTMLStyleElement 


100% 


88% 


88% 


Interface HTMLBodyElement 


93% 


100% 


100% 


Interface HTMLFormElement 


95% 


95% 


100% 


Interface HTMLSelectElement 


97% 


100% 


100% 


Interface HTMLOptGroupElement 


100% 


100% 


100% 


Interface HTMLOptionElement 


100% 


100% 


100% 


Interface HTMLInputElement 


93% 


96% 


100% 


Interface HTMLTextAreaElement 


100% 


100% 


100% 


Interface HTMLButtonElement 


100% 


100% 


100% 


Interface HTMLLabelElement 


100% 


100% 


100% 


Interface HTMLFieldSetElement 


100% 


100% 


100% 


Interface HTM LLegend Element 


75% 


100% 


100% 


Interface HTMLUListElement 


100% 


100% 


83% 


Interface HTMLOListElement 


100% 


100% 


100% 


Interface HTMLDListElement 


100% 


100% 


100% 


Interface HTMLDirectoryElement 


100% 


100% 


100% 


Interface HTMLMenuElement 


100% 


100% 


100% 


Interface HTMLLIEIement 


100% 


100% 


100% 
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Interface HTMLDivElement 


100% 


100% 


100% 


Interface HTMLParagraphElement 


100% 


100% 


100% 


Interface HTMLHeadingElement 


100% 


100% 


100% 


Interface HTMLQuoteElement 


75% 


100% 


100% 


Interface HTMLPreElement 


100% 


100% 


100% 


Interface HTMLBREIement 


100% 


100% 


100% 


Interface HTMLBaseFontElement 


100% 


100% 


100% 


Interface HTMLFontElement 


100% 


100% 


100% 


Interface HTMLHREIement 


100% 


100% 


100% 


Interface HTMLModElement 


83% 


83% 


100% 


Interface HTMLAnchorElement 


97% 


97% 


100% 


Interface HTMLImageElement 


92% 


96% 


100% 


Interface HTMLObjectElement 


88% 


98% 


98% 


Interface HTMLParamElement 


80% 


100% 


100% 


Interface HTMLAppletElement 


92% 


100% 


100% 


Interface HTMLMapElement 


100% 


100% 


100% 


Interface HTMLAreaElement 


94% 


100% 


100% 


Interface HTMLScriptElement 


94% 


100% 


94% 


Interface HTMLTableElement 


100% 


100% 


100% 


Interface HTMLTableCaptionElement 


100% 


100% 


100% 


Interface HTMLTableColElement 


86% 


100% 


100% 


Interface HTMLTableSectionElement 


88% 


100% 


100% 


Interface HTMLTableRowElement 


91% 


100% 


100% 


Interface HTMLTableCellElement 


91% 


100% 


100% 


Interface HTMLFrameSetElement 


100% 


100% 


100% 


Interface HTMLFrameElement 


80% 


100% 


100% 


Interface HTMLIFrameElement 


83% 


96% 


96% 


DOM Level 3 Load and Save 


Interface DOMImplementationLS 0% 0% 100% 


Interface LSParser 


0% 
0% 


0% 


88% - 4/9 


Interface LSInput 


0% 


100% - 1/9 


Interface LSResourceResolver 


0% 


0% 
0% 
0% 


? 


Interface LSParserFilter 


0% 


? 


Interface LSProgressEvent 


0% 


? 


Interface LSLoadEvent 


0% 
0% 


0% 


? 


Interface LSSerializer 


0% 


100% - 1/7 
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MSIE6 Firefoxl.O 


Opera 8 


Interface LSOutput 


0% 0% 


100% - 1/4 


Interface LSSerializerFilter 


0% 0% 


? 


DOM Level 2 Style 


Interface Stylesheet 


75% 


100% 


0% 


Interface StyleSheetList 


100% 


100% 


0% 


Interface MediaList 


0% 


100% 


0% 


Interface LinkStyle 


0% 


100% 


0% 


Interface DocumentStyle 


100% 


100% 


0% 


Interface CSSStyleSheet 


0% 


90% 


0% 


Interface CSSRuleList 


0% 


100% 


0% 


Interface CSSRule 


0% 


100% 


0% 


Interface CSSStyleRule 


0% 


100% 


0% 


Interface CSSMediaRule 


0% 


100% 


0% 
0% 
0% 


Interface CSSFontFaceRule 


0% 


0% 
0% 


Interface CSSPageRule 


0% 


Interface CSSImportRule 


0% 


88% 


0% 


Interface CSSCharsetRule 


0% 


100% 


0% 


Interface CSSUnknownRule 


0% 


0% 


0% 


Interface CSSStyleDeclaration 


20% 


95% 


60% 


Interface CSSValue 


0% 


0% 
0% 


0% 
0% 
0% 
0% 
0% 


Interface CSSPrimitiveValue 


0% 


Interface CSSValueList 


0% 


0% 
0% 
0% 


Interface RGBColor 


0% 


Interface Red 


0% 


Interface Counter 


0% 0% 


0% 


Interface ViewCSS 


0% 75% 


75% 


Interface DocumentCSS 


0% 


0% 


0% 
0% 


Interface DOMImplementationCSS 


0% 


0% 


Interface ElementCSSInlineStyle 


100% 


100% 


100% 


Interface CSS2Properties 


64% 


100% 


90% 


DOM Level 2 Traversal and Range 


Interface Nodelterator 


0% 


0% 


88% 


Interface NodeFilter 


0% 


100% - 1/2 


100% - 1/2 


Interface TreeWalker 


0% 


69% 


73% 


Interface DocumentTraversal 


0% 


67% 


100% 


Interface Range 


0% 


100% - 7/25 


100% - 7/25 
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MSIE6 


Firefoxl.O 


Opera 8 


Interface DocumentRange 


0% 


100% 


100% 


DOM Level 3 Validation 


Interface DocumentEditVAL 


0% 


0% 


0% 
0% 
0% 
0% 


Interface NodeEditVAL 




0% 
0% 


0% 
0% 


Interface ElementEditVAL 


Interface CharacterDataEditVAL 


0% 


0% 




DOM Level 2 Views 






Interface AbstractView 


100% 


100% 


100% 


Interface DocumentView 


0% 


100% 


100% 



Legende 




i% - 25% 



26% - 50% 



51% -75% 



76% - 89% 



Divers 



Suivent diverses normes, officiellement recommandees par le World Wide Web 
Consortium ou standards de fait. 



H 


Fonctionnalites 


MSIE6 


Firefoxl.O 


Opera 8 




Protocoles de communication 


E-mail 


N 


N 


O 




FTP 


O 


P 


P 


Gopher 


N 


O 


P 


HTTP 1 .0 


P 





O 


HTTP 1 .1 


P 








IDN 


N 








IRC 


N 


p 







NNTP (Usenet) 


N 


N O 


SOCKS 


O 





N 




SSL 


O 








Formats graphiques 


GIF 











JPEG JFIF 


p 








PNG 


p 










MNG 


N 


N 


N 
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Fonctionnalites 


MSIE6 


Firefoxl.O Opera 8 


SVG 


N 


N P 


Technologies XML 


Atom 0.3 


N 


P 





MathML2.0 


N P 


N 


P3P1.0 


P 


P 


N 


RSS1.0 


N 


P 





RSS 2.0 


N 


P 





SOAP 1.2 


O 


O N 


SVG 1.1 


N 


P 


p 


VoiceXML 2.0 


N 


N 
N 





XForms 1 .0 


N 


N 


Xlnclude 1 .0 


N 


P 


N 


XLinkl.O 


N 


P 


N 


XPath 1 .0 


N 


O 


N 


XPointer 1 .0 




O 


N 


XSL1.0 


O 





N 


XSLT1.0 


O 


O N 


Autres 


Cookies 


O 


O 


O 


ECMAScript/JavaScript 


P 


O 


O 


Java 


P 


P 


P 


Link type navigation 


N 


N 


P 


Style sheet selection 


N 








Tabbed pages 










User style sheets 


O 








Windowed pages 


O 









Legende 





P 


O 


Prise en charge de cette fonctionnalite Non 


Partiel 


Oui 
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Bilan 



Void un bilan rapide de tous ces standards. Toutes les fonctionnalites des tableaux 
complets ont la meme importance dans le calcul. Signalons que ce bilan ne reflete pas 
l'inegale importance en pratique des diverses specifications. 



Specifications 


MSIE6 


Firefox 1.0 


Opera 8 


HTML 


HTML 4.01 


88% - 495/506 


93% - 495/506 


90% - 495/506 


XHTML 1.0 


50% 


92% 


100% 


XHTML 1.1 


50% 


46% 


23% 


CSS 


CSS 2.1 


47% 


77% 


85% 


DOM 


Level 3 Core 


32% 


54% - 171/187 


53% - 180/187 


Level 2 Events 


46% 


96% 


96% 


Level 2 HTML 


93% 


99% 


99% 


Level 3 Load and Save 


0% 


0% 


96% - 12/49 


Level 2 Style 


42% 


82% 


54% 


Level 2 Traversal and Range 


0% 


62% - 34/53 


87% - 34/53 


Level 3 Validation 


0% 


0% 


0% 


Level 2 Views 


50% 


100% 


100% 


Divers 


Fonctionalites diverses 


36% 


67% 


61% 


Total 


HTML 


86% 


91% 


88% 


CSS 


47% 


77% 


85% 


DOM 


54% 


77% 


75% 


Divers 


36% 


67% 


61% 


Total 


63% 


81% 


80% 



Legende 




i% - 25% 



26% - 50% 



51% -75% 



76% - 89% 



Compatibility des navigateurs 

Annexe F 



Webographie 



Pour les tableaux « CSS » et « Divers », nous nous sommes en partie inspires des 
sources suivantes. A terme, nous aurons mene tous les tests nous-memes. 
• Comparison of web browsers - Wikipedia, the free encyclopedia 
http://en.wikipedia.org/wiki/Comparison_of_web_browsers 



Reference Wikipedia, I'encyclopedie libre universelle 

Wikipedia est une encyclopedie collaborative libre tres riche et en evolution permanente, creee en 
Janvier 2001 et dont la croissance semble s'emballer sans cesse depuis. En mai 2005, elle compte 
environ 600 000 articles en anglais, 110 000 en francais, et deux millions d'articles dans ses 
200 langues. C'est devenu une source d'information de reference souvent citee, alimentee par les 
contributions individuelles de nombreux passionnes ou specialistes qui prennent un peu de leur 
temps pour enrichir ce fonds commun. Leurs petits ruisseaux ont desormais depasse le stade des 
grandes rivieres... 

► http://www.wikipedia.org 



• CSS browser support 
http://www.westciv.com/style_master/academy/browser_support/ 

• CSS contents and browser compatibility 
http://www.quirksmode.org/css/contents.html 

• Full CSS property compatibility chart 
http://www.corecss.com/properties/full-chart.php 

• Opera Changelogs : http://www.opera.com/docs/changelogs/ 

• opera.vox. material : http://csant.info/vox/opera 

• Web specifications supported In Opera 7 : http://www.opera.com/docs/specs/ 

• XML In Mozllla : http://www.mozilla.org/newlayout/xml/ 



Autres navigateurs 

A l'avenir, nous pouvons envisager d'inclure d'autres navigateurs dans cette etude 
(par exemple Safari). 



_ Sites et ressources 

^__T/\A/A/fX£S 

Mentions legates 

Nous n'avons pas verifie toutes ces informations et des erreurs ont pu se glisser dans cette 
etude. Si vous souhaitez corriger ou completer ce document, controlez-en la derniere ver- 
sion en ligne a l'adresse http://nanobox.chipx86.com/browser_support.php, puis contactez 
David Hammond par courrier electronique a l'adresse nanobot@gmail.com. 

Vous pouvez aussi vous rendre sur les forums de discussion de son site, a l'adresse : 
http://nanobox.chipx86.com/forums/viewforum.php?f=8. 



Article ecrit par David Hammond et couvert par une licence Creative Commons 

(http://creativecommons.0rg/licenses/by-nd/2.O/). 

Toute exploitation d'une version exacte est autorisee. 
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Symboles 

rafter Voir pseudo-classe 
rbefore Voir pseudo-classe 
rfirst-child Voir pseudo-element 
:first-letter Voir pseudo-element 
:first-line Voir pseudo-element 
:hover Voir pseudo-classe 
:visited Voir pseudo-classe 
<div> 12, 54 
<link> 42, 44 
@import 43, 44 

A 

acces rapide 216 
accessibilite 3, 7, 271, 290 

aspect legal 8 

images 139 

images reactives 178 

normes 8 

validation 8 

XHTML 14 
Adobe Acrobat Reader 73 
afficher 149 

alignement horizontal 169 
alt (texte alternatif) 9, 20, 34, 73, 136, 155, 179 
ancetre 52, 102 
ancre 217 

arborescence 23, 51, 102 
arriere-plan 55, 172 

couleur 48 

d'un bloc 209 

d'un menu 221 

image 90-94, 172, 191 
arrondi 189 
ASP 237 



assistant personnel 5 
at-rules Voir regle-at 
attribut 13, 23 

Voir aussi propriete 23 
aural 239 

B 

background 245 

Voir aussi arriere-plan 
balise 21 

<em> et <i> 20 

< style > 42 

de type bloc 29, 104 

depreciee 28 

en ligne 28, 104 

HTML 22-32 

incorporer les styles 44 

obsolete 6, 28 

proprietaire 6, 40 

style 45 

titre 33 

vide 22 

XHTML 13 
base de donnees 237 
blink 78 
bloc 11, 24-27, 29, 33, 102 

centrage 128 

Voir aussi balise, de type bloc 

Voir aussi element, bloc 
blog 112, 180, 195, 202, 272 
boite 98 

bordure 85-90, 98 
braille 5, 34, 217, 239 
BrailleNet 217 
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C 
cadre 14 

arrondi 189 

frame, iframe 9 
caique 32, 97 
casse 79 
centrer 125 

horizontalement 126 

line-height 127 

vertical-align 127 

verticalement 127 
chars et 15 
charte graphique 60 
classe 46, 54 

nom de ~ 47 
colonne 260 
compatibilite 3, 6, 201 

Firefox 187, 285 

Internet Explorer 6, 34, 49, 53, 78, 99, 102, 
112, 116, 121, 126, 127, 137, 143, 150, 
151, 172, 178, 187, 193, 202, 285 

navigateurs 40, 285 

Netscape Navigator 39 

Opera 187, 217, 285 
conformite 277 

conteneur 29, 32, 102, 121, 128, 132, 212 
contenu 225 

boite 99 

centrage 125 

des balises 26 

dynamique 237 

en-tete 210 

genere 237 

image 90 

separer de la mise en forme 31 

structure 225 
couleur 59 

d'arriere-plan 91 

de fond 82 

des bordures 87 

des caracteres 77 

espace de couleurs 64 

harmonie 60 

mots-cles 66 



notation hexadecimale 65, 77 
courte 66 

notation RGB 65, 77 

public cible 61 

ressources 67 

symbolique 63 
crenage 80 
CSS 2 245 

version francaise 295 
CSS 3 40, 53, 150 
CSS ZenGarden 238 
CSS, compatibilite des navigateurs 290-295 

D 

declaration 41 
dimension 99 
display 27, 127, 150, 169,248 

block 165, 223 

inline 151, 169 

none 136, 151, 158, 179 

table-cell 127 
DocBook 13 

DOM (Document Object Model) 296 
DTD (Document Type Definition) 14 

E 
editeur 

Dreamweaver 10, 32, 269 

Golive 10, 32 

HTML-Kit 210 

Notepad 210 
element 

bloc 24-27, 29 

en ligne 24, 27, 28 

imbrication 23 

structure 24 
em (unite) 75 
en ligne 11, 27 

Voir aussi balise, de type en ligne 

Voir aussi element, en ligne 
encodage 15 
enfant 53, 102 
en-tete 209-214 
ergonomie 60 



Index 



espacement des mots 81 
ex (unite) 75 

F 
FAQ.217 

feuille de styles 39-53 
fil d'Ariane 216 
Firefox 187, 285 
Flash 9, 149, 160 
float 114, 142, 170, 249 
flux 121 

Foire aux Questions 217 
format 

graphique 73, 300 

image 183 
formulaire 30, 223 
frere 102 

G 

gabarit 206, 259 
Gecko 194, 270 
GeckoZone 270 
GNU/Linux 187 
graisse 11 
grammaire 13 

H 

handheld 239 
handicap 

deficiences mentales et neurologiques 7 

deficiences visuelles 7, 20 

malentendant 7 

physique 7 

surdite 7 
header 209 

hierarchie 51, 102, 211 
horizontal 168 
horizontal rule (hr) 90 
HTML 5, 21, 40 

alt Voir alt (texte alternatif) 

ancetre 52 

class 41 

descendant 53 

id 41, 46 



ou XHTML 13 

parent 52, 53 

structure des documents 102 

title 20, 34, 153, 155, 179 

validation 17 



id 48 

identifiant 23, 46, 48, 57, 121, 185, 211, 217 

identificateur 48 

image 85 

reactive 177, 181 
impression 239 
infobulle 20, 34, 155 
inline Voir en ligne 
interlettrage 80 
interlignage 80 
Internet Explorer 39, 202, 285 

Voir aussi compatibilite, Internet Explorer 
italique 11 

J 

Java 9 

JavaScript 9, 135, 139, 149, 159, 160, 177, 238 

justification 81 

L 

lang 15 

lettrine 118, 141 
lien d'evitement 216 
liste a puces 171 
Lynx 202 

M 

Macintosh 5, 187 
marge 50, 98, 163 

basse 46 

externe 98, 119 

haute 46 

inferieure 107 

interne 96, 101, 173, 191 

laterale 128 

negative 131, 133 

par defaut 21 
masquer 149 
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MathML 13 
menu 159 

bouton 164 

graphique 183 

horizontal 168 

liste 160 

navigation 33, 159 

puce 171 

relief 166 

thematique 218 

vertical 161 
meta-information 210 
Microsoft Internet Explorer 

Voir Internet Explorer 
Microsoft Windows 5, 187 
mise en forme 

de caracteres 69 

separer du contenu 31 
moteur de recherche 216 
moteur de rendu 194, 270, 286 
-moz-border-radius 194 
Mozilla 194, 270 

N 

navigateur 20, 187, 269 

compatibilite 5, 201 
CSS 290 
DOM 296 
HTML 287 

Firefox 91, 116, 270, 285 

Internet Explorer 74, 285 

mode texte 20 

Mozilla 40, 67, 91,187,285 

Netscape Navigator 5, 74, 92, 285 

Opera 116, 285 

plug-in 73 

Voir aussi compatibilite 5 
navigation 62, 91, 194, 215 

accessibilite 7 

pas de limites 9 

Voir aussi menu 
Netscape 5, 6, 187 
non voyants 179 
normes 



CSS 53 

d'accessibilite du Web 7 
du W3C XXIII 
Voir aussi standard 

o 

oblique 11 
Openweb 269 
Opera 187, 217, 285 
ordre de declaration 162 



padding 21, 98, 252 

Palm 202 

parent 102 

PDF (Portable Document Format) 73 

PHP 237, 238 

plan du site 216 

pointeur de la souris 34, 49, 79, 150, 162, 178, 

181, 184, 194, 220, 223 
police de caracteres Voir typographic 
porte coulissante 181 
positionnement 97, 121 

absolu 108, 120 

ancetre 102 

boite 98 

clear 117 

conteneur 102, 108 

enfant 102 

fixe 108, 111, 120 

flottant 114, 120 

flux 103, 104, 119 

frere 102 

modele de boite 99 

parent 102 

profondeur 97, 112 

relatifl07, 119 
prechargement 135, 179, 180 

accessibilite 139 

cache 135 
priorite 162 
projection 239 
propriete 41, 245-257 

CSS 2 245 



Index 



d'une balise 23 

regroupement de ~s 50 

valeur d'une ~ 41 

vocale 295 
pseudo-classe 46, 48, 291 

:after 193 

:before 193 

:hover 149-152, 167, 178 

:visited 162 
pseudo-element 46, 48, 162, 291 

:first-child 102 

:first-letter 49, 141 

:first-line 49 
puces 171 
px (unite) 75 

R 

RDF 13 

recommandation 6, 18 
regie 41 
regle-at 291 

@import 43 
regroupement 50 
relief 166 
rollover 177 

s 

Safari 202 
selecteur 41, 291 

CSS 48 

de classe 46 

de style 46 

hierarchique 51 

regroupement des ~s 50 
selection hierarchique 51 
semantique 3, 9, 10, 18 
separateur 41 
serif 70-72 
SGML 21 
soulignement 78 
sous-titre 221 
SQL 237 
standard 3, 18 

avantages 10 



polices 70 

site de reference des ~s 20 

XHTML 5 
style 

alternatif238 

dans une balise 45 

selecteur de ~ 46 
survol 150, 177 
SVG 13 
syntaxe 

de regroupement 50 

generate du XHTML 13 

T 
taille 

fixe 75 

mots-cles 76 

relative 75 
telephone mobile 5 
titre 221 
tv239 
typographic 69 

casse 79 

chasse 71, 12 

crenage 72, 80 

cursive 71 

empattement 71 

espacement des mots 81 

fantasy 71 

format .eot 74 

format .pfr 74 

format graphique 73 

graisse 11 

interlettrage 80 

interlignage 80 

italique 11 

justification 81 

monospace 71 

oblique 11 

police 69-80 

sans serif 71, 72 

serif 71 

taille fixe 75 

taille relative 75 
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unites de taille 74 




validation 16 


Webfont Maker 74 




WAI (Web Accessibility Initiative) 7 


WEFT 74 




WCAG (Web Content Authoring 
Guidelines) 7, 8 


U 




weblog Voir hlog 


Unicode 16 




WEFT (Web Embedding Fonts) 74 


unite 74, 75, 290 




WYSIWYG 10, 120 


Unix 5 




X 


V 




XHTML 5, 13, 15, 207, 230, 290 


valeur d'une propriete 41 




syntaxe generale 13 


validateur 8, 17, 271 




validation 17 


version imprimable 239 




XML 4, 13, 301 


visibility 257 






hidden 117, 136, 158 




Z 

z-index 112 


W 






W3C (World Wide Web Consortium) XXIII, 




4, 18, 20, 271 
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U 

bunt 



